2.2 Вертикальное выпадающее меню

Это вертикальное выпадающее меню, которое позволяет разместить большое количество ссылок на ограниченной площади.

Простая, удобная и красивая навигация на сайте с большим количеством разделов.

Применяются псевдоклассы CSS. Используя псевдокласс hover, мы меняем свойство выпадающего блока с display:none на display:block. Т. е., при наведении мышки невидимый контейнер со ссылками становится видимым.

2.2.1. Создадим тело нашего меню:

<div id="menu_body">

<ul id="ul1">

<li><a href="#">menu 1</a>

<ul>

<li><a href="#">sub menu 1</a></li>

<li><a href="#">sub menu 2</a></li>

<li><a href="#">sub menu 3</a></li>

<li><a href="#">sub menu 4</a></li>

</ul>

</li>

</ul>

</div>

Где <div id="menu_body"> используется для задания фона, <ul id="ul1"> — список с пунктами меню, а <li><a href="#">sub menu 1</a></li> — пункты подменю.

2.2.2. При помощи стилей уберем подменю:

#menu_body li ul{display:none}3. Используя псевдокласс hover, сделаем подменю видимым при наведении мыши:

#menu_body li:hover ul, #menu_body li.over ul{

display: block

}

2.2.3 Поскольку Internet Explorer считает, что псевдоклассом hover обладает только тег a, добавим небольшой код на JavaScript, который это исправит:

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("ul1");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace(" over","");

}

}

}

}

}

window.onload=startList;

2.2.4 Вот собственно и все, осталось навести красоту:

#menu_body{

background:#81A192;

width:200px

}

#menu_body ul li{

list-style-type:none;

border-bottom:1px solid #fff;

margin-left:-40px;

padding-left:7px

}

#menu_body ul li a{

color:#fff;

font-family:verdana,arial,sans-serif;

text-decoration:none

}

#menu_body ul li ul li{

border:0;

list-style-type:square;

color:#fff;

list-style-position:inside

}

#menu_body ul li ul{

border-top:1px solid #fff;

margin-left:-7px;

padding-left:50px

}

Кроссбраузерность

IE 5+; Opera 7+; FF 1+; Mozilla 1+.

У меню есть два очень серьезных недостатка: если список разделов или подразделов очень велик, то при открытии подменю появляется полоса прокрутки, а когда вы хотите прокрутить страницу, меню закрывается; если у пользователя старого браузера не работает это меню, то он вообще не сможет перемещаться по вашему сайту.

2.3 Вертикальное раскрывающееся меню

Это вертикальное раскрывающееся меню, которое позволяет разместить большое количество ссылок на ограниченной площади. Фактически это доработка предыдущего меню, которая позволяет убрать все его недостатки.

Простая, удобная и красивая навигация на сайте с большим количеством разделов, которая будет работать во всех браузерах.

Используя, как и в предыдущем примере, вложенные списки и свойства CSS display, добавляем короткий код на JavaScript для управления видимостью раскрывающихся блоков.

2.3.1. Создадим тело нашего меню:

<ul id="menu">

<li><a href="#" onclick="openMenu(this);return false">menu 1</a>

<ul>

<li><a href="#">sub menu 1</a></li>

<li><a href="#">sub menu 2</a></li>

<li><a href="#">sub menu 3</a></li>

<li><a href="#">sub menu 4</a></li>

<li><a href="#">sub menu 5</a></li>

<li><a href="#">sub menu 6</a></li>

<li><a href="#">sub menu 7</a></li>

</ul>

</li>

</ul>

Где <div id="menu"> используется для задания фона, <li><a href="#" onclick = "openMenu(this);return false">menu 1</a> — пункты меню c вызовом функции открытия или закрытия подменю по событию onclick.

2.3.2. Напишем функцию на JavaScript, которая будет открывать и закрывать подменю.

function openMenu(node){

var subMenu = node.parentNode.getElementsByTagName("ul")[0];

subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";

}

2.3.3. Позаботимся о пользователях старых браузеров, и вместо того, чтобы писать в стилях #menu li ul{display:none}, напишем еще одну функцию, которая будет закрывать все подменю при загрузке страницы. Если по каким-либо причинам наш JavaScript код не сработает, меню будет полностью открыто и позволит пользователю кликать на ссылки подменю.

function allClose(){

var list = document.getElementById("menu").getElementsByTagName("ul");

for(var i=0;i<list.length;i++){

list[i].style.display = "none";

}

}

2.3.4. Поставим вызов этой функции на загрузку страницы.

<body onload="allClose()">5. Вот собственно и все, осталось навести красоту:

#menu{background:#81A192;width:200px;list-style-type:none;padding:0;margin:0}

#menu li{border-bottom:1px solid #fff;padding:3px}

#menu li a{color:#fff;font-family:verdana,arial,sans-serif;text-decoration:none}

#menu li ul{border-top:1px solid #fff;padding:0;margin:0;list-style-type:square;list-style-position:inside}

#menu li ul li{border:0;list-style-type:square;color:#fff;list-style-position:inside}