Раздвижное меню для сайта без 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> На этом установка завершена! Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 25 | |
| |
1 2 3 » | |