Красивое горизонтальное меню для сайта с подсветкой пунктов, сделанное с помощью библиотеки jq. В 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; } В body - это: 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> Затем скачиваем архив и кидаем файлы jquery.sliding-menu.js - в папку js, а картинки - в папку images
Источник/Автор:Неизвестен
|