Главная » Скрипты для uCoz » Навигация
Красивое горизонтальное меню с оригинальной подсветкой активного пункта на jQuery
04.11.2010, 15:06 | |
Добавлено - 04.11.2010, 15:06 Добавил - U-cheniy Категория - Навигация Просмотров: 2096 Комментариев - 1 Рейтинг: 5.0/3 Обсудить этот скрипт на форуме
Установка: 1. После head на нужных вам страницах вставляйте:
Code <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> 2. Следующий код вставляйте в то место, где будет само меню:
Code <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> 3. Далее залейте файлы из прикреплённого архива следующим образом:
При копировании материала, прямая активная ссылка на сайт uvda.ucoz.ua обязательна! | |
Что-то похожее
Всего комментариев: 1 | |
| |