Красивое меню с подкатегориями
http://www.ruseller.com/lessons/les208/example/slidedemo.html
Главная цель данного урока - это показать Вам как сделать красивое меню с всплывающими подкатегориями.
С помощью HTML, CSS и jQUery у нас должно получиться прекрасное меню, которое станет украшением любого сайта.
Прежде всего нам необходимо вставить следующий код между тегами <head></head>:
<link href="ssubnav.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js" type="text/javascript"> </script>
<script src="jquery.hoverIntent.js" type="text/javascript"> </script>
<script src="ssubnav.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){
$.slidenav({
animspeed: 'medium',
hideonout: 'true'
});
});
</script>
Здесь мы подключаем необходимые скрипты и таблицу стилей. Далее идет черед оформления меню в виде неупорядоченного списка. Ниже Вы можете увидеть структуру нашего тестового меню:
<ul>
<li><a href="">Menu Item 1</a>
<ul>
<li><a href="">1. Submenu Item 1</a></li>
</ul>
</li>
<li><a href="">Menu Object 2</a>
<ul>
<li><a href="">2. Submenu Item 1</a></li>
<li><a href="">2. Submenu Item 2</a></li>
<li><a href="">2. Submenu 3</a></li>
<li><a href="">2. Submenu 4</a></li>
</ul>
</li>
<li><a href="">Menu Array 3</a>
<ul>
<li><a href="">3. Submenu Item 1</a></li>
<li><a href="">3. Submenu Item 2</a></li>
<li><a href="">3. Submenu Item 3</a></li>
</ul>
</li>
<li><a href="">Menu Thing 4</a>
<ul>
<li><a href="">4. Submenu Item 1</a></li>
<li><a href="">4. Submenu Item 2</a></li>
<li><a href="">4. Submenu Item 3</a></li>
<li><a href="">4. Submenu Item 4</a></li>
</ul>
</li>
<li><a href="">Menu List 5</a></li>
<li><a href="">Menu Collection 6</a>
<ul>
<li><a href="">6. Submenu Item 1</a></li>
<li><a href="">6. Submenu Item 2</a></li>
<li><a href="">6. Submenu Item 3</a></li>
<li><a href="">6. Submenu Item 4</a></li>
</ul>
</li>
</ul>
После того, как Вы проделаете это - необходимо будет этот список поместить в несколько слоев (многоточие - это то место, куда необходимо вставлять список с ссылками).
<div class="slidenav-container">
<div class="slidenav">
.................
</div>
<div class="slidenav-box">
<div class="subnav">
</div>
</div>
Вот и все! Пользуйтесь, на здоровье! Всем хороших выходных :)