Классное меню с выпадающими элементами
Данный урок покажет Вам как сделать красивое dropdown меню, которое подойдет под любой сайт.
Это меню чрезвычайно легкое (занимает всего 1.4 кб), очень легко устанавливается и классно выглядит.
Давайте начнем. Для начала подключаем стили оформления и скрипт меню (между тегами <head></head>):
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
Далее идет HTML структура меню. Код ниже показывает только код, который относится к первому элементу меню "Dropdown One":
<ul class="menu" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
...
</ul>
Как Вы видите все предельно просто. Всплывающие подменю оформляются в виде списка с помощью тегов <ul> и <li>.
После меню в самом конце документа нам необходимо вставить еще одну небольшую функцию:
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
Классное меню готово! Всем спасибо за внимание!
Комментарии:
Нету комментариев для вывода...