Главная » Файлы » Прочие скрипты » jQuery |
Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery
23.06.14, 09:03:00 | |
Интересное меню с оригинальной подсветкой пунктов. Замечательно смотрится на тёмных дизайнах Для начала посмотрите ДЕМО Установка: После /head на нужных вам страницах вставляйте: Код <script type="text/javascript" src="/js/jquery.sliding-menu.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu(); }); </script> <style> body { font-family: "Arial","Verdana","Helvetica"; font-size: 0.9em; margin: 1.5em; } ul.SlidingMenu { list-style: none; padding: 0em; } ul.SlidingMenu a { padding: 0.62em 1.5em; text-decoration: none; color: #FFF; outline: none; } ul.Horizontal li { float: left; } .ClearFix { clear: both; } #HorizontalSlidingMenu { background: url('/images/menubg.png') top left repeat-x; } #HorizontalSlidingMenu li.Background { background: url('/images/bg_menu_right.png') top right no-repeat; } #HorizontalSlidingMenu li.Background div{ background: url('/images/bg_menu.png') top left no-repeat; height: 100%; margin-right: 31px; } </style> Следующий код вставляйте в то место, где будет само меню: Код <div id="HorizontalSlidingMenu"> <ul class="SlidingMenu Horizontal"> <li><a href="#">Первый пункт</a></li> <li><a href="#">Второй пункт</a></li> <li><a href="#">Третий пункт</a></li> <li><a href="#">Четвёртый пункт</a></li> <li><a href="#">Пятый пункть</a></li> </ul> <div class="ClearFix"></div> </div> Далее залейте файлы из прикреплённого архива следующим образом: jquery.sliding-menu.js - в папку js Оставшиеся три картинки - в папку images Материал подготовлен Apocalypse | |
Просмотров: 512 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |