ZorNet.Ru — сайт для вебмастера » Меню для сайта » Раздвижное меню для сайта без CSS

Раздвижное меню для сайта без CSS

Раздвижное меню для сайта без CSS
Представляю меню без стилей CSS, так как стили идут сразу с кодом который если будите устанавливать то не в блок сайта. Дизайн создан на высоте, но его можно поменять, первая ссылка, эта ссылка на цвет, можете создать свой цвет под свой дизайн сайта вот эта ссылка. Очень разнообразное меню которое может подойти под любую тематику и на разделы поставить иконки, что очень стильно будит. но это на ваш выбор.

Пример дизайна

А здесь вы можете расширять или уменьшать меню, располагается она в самом начале кода.

Код
.side-navigation{width:205px

Полный код навигации:

Навигация:

Код
<style>
.side-navigation{width:235px;background:url('http://zornet.ru/zornet_ru5/pagebg.jpg') #291C16;box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin-bottom:10px;color:#fff}
.side-navigation .block-head{color:#fff;font-size:18px;font-family:arial,tahoma;padding:4px 8px;border-bottom:1px solid #000}
.side-navigation .block-inner{padding-bottom:2px}
.side-block .block-inner{padding:5px;}
.side-block .block-inner.nopadding{padding:0px !important;}

.zp-links a{display:block;color:#fff;padding:4px 8px;border-bottom:1px solid #000;border-top:1px solid #3B2D2A;text-shadow:0px 1px 0px #000;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;font-weight:bold;outline:none;text-decoration:none;}
.zp-links a:hover{color:#FFB32E;padding-left:14px;background:rgba(0,0,0,0.2)}
.zp-links a.w-sub{background:url('http://zornet.ru/zornet_ru5/submenu-btn.png') no-repeat;background-position:190px 7px}
.zp-links a.w-sub:hover{background:url('http://zornet.ru/zornet_ru5/submenu-btn.png') no-repeat rgba(0,0,0,0.2);background-position:195px 7px}
.zp-links .s-level a.w-sub{font-weight:bold;background-position:182px 7px}
.zp-links .s-level a.w-sub:hover{background-position:190px 7px}
.zp-links .s-level{padding-left:22px}
.zp-links .s-level a{border-left:2px solid #FFB32E;font-weight:normal}
.zp-links .s-level a:hover{padding-left:8px;margin-left:-8px}
</style>

<div class="side-navigation">
<div class="block-head" style="padding:5px 8px 0px 8px;"><img src="http://zornet.ru/zornet_ru5/nav-block-title.png" alt="Навигация"></div>
<div class="block-inner">
<div class="zp-links">
<a title="Главная" href="http://zornet.ru/">Главная</a>
<a title="Форум игрока" href="http://zornet.ru/forum/">На форум</a>
<a title="Новости" href="/news/">Новости</a>
<a title="Музыка" href="/blog/">Музыка</a>
<a title="Статьи" href="/publ/">Статьи</a>
<a title="ФотоZал" href="/photo/" >ФотоZал</a>
<a title="КиноZал" href="/stuff/" >КиноZал</a>
<a title="Новости" href="/news/">Новости сайта</a>
<a title="Музыка" href="/blog/">Музыка настроение</a>
<a title="Статьи" href="/publ/">Тематические статьи</a>
</div>

</div>

</div>

</div>
</div>
<script type="text/javascript">
$(function(){
$(".s-level").hide();
$(".zp-links a.w-sub").click(function(){
var submenu = $(this).attr('rel');
$("#"+submenu+"").toggle('fast');
});
});
</script>

На этом установка завершена!

Демонстрация
12 Августа 2012 Просмотров: 4395 Комментариев: (25)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 25
Kosten
Kosten 12 Августа 2012 13:321
+1
Да, это меню не надо вставлять в блок сайта!
viksTazZz
viksTazZz 15 Сентября 2012 14:342
0
Оно с КСС просто в тег <style> поставлен biggrin
Kosten
Kosten 15 Сентября 2012 14:403
0
viksTazZz, истину говоришь
usenok2908
usenok2908 15 Декабря 2012 18:494
0
а как поменять цвет шрифта????
Kosten
Kosten 15 Декабря 2012 22:035
0
Не видел не одного меню такого с другим шрифтом cool
usenok2908
usenok2908 15 Декабря 2012 22:256
0
не я имею ввиду цвет букв как поменять не белый а другой?????? biggrin
Kosten
Kosten 15 Декабря 2012 23:247
0
Нет не как!
1 2 3 »
avatar