Главная » Шпаргалка » PHP MYSQL javascript » jQuery » Красивое меню с подкатегориями

Красивое меню с подкатегориями

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>

Вот и все! Пользуйтесь, на здоровье! Всем хороших выходных :)