Выпадающее меню

Автор: <The Webmakers Lounge/>

Создание многоуровнего выпадающего меню с помощью CSS, пары строчек Javascript, работающего корректно в Файрфоксе, Опере, Интернет Эксплорере и Сафари кажется вам непосильной задачей? Да ничего подобного!

Давайте развеем это заблуждение.

И так, для начала нам нужен список. Ведь большинство всех меню это ни что иное как список ссылок.

<ul id="nav">
<li><а hrеf="http://www.webmakerslounge.com/">Percoidei</a>
<ul>
<li><а hrеf="http://www.webmakerslounge.com/">Remoras</a>
<ul>
<li><а hrеf="http://www.webmakerslounge.com/">Echeneis</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Phtheirichthys</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Remora</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Remorina</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Rhombochirus</a></li>
</ul>
</li>
<li><а hrеf="http://www.webmakerslounge.com/">Tilefishes</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Bluefishes</a></li>
<li><а hrеf="http://www.webmakerslounge.com/">Tigerfishes</a></li>
</ul>
</li>
<li><а hrеf="http://www.webmakerslounge.com/">Anabantoidei</a>
</li>
</ul>

Теперь у нас есть хорошо структурированый список. Добавим к нему немного стилей:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
}

#nav li {
float: left;
width: 10em;
}

Для селектора #nav li необходимо указать ширину, чтобы это корректно отображалось в Опере. Так же не забудьте указать clear:left для блока, который последует за меню, так как мы используем float.

Теперь нам необходимо само “выпадание”. добавляем следующие стили:

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

Обратите внимание что здесь не используется display:none, для того чтобы сохранить максимальную доступность. Вместо него мы используем left: -999em. Это не обязательно и может быть легко заменено на display:none.

Вы конечно же обратили внимание на то, что у селектора li описан псевдо класс :hover, который конечно же не будет работать в Интернет Эксплорере. Для того, чтобы заставить наше выпадающее меню работать в Интернет Эксплорере мы используем этот маленький скриптик:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhoverb"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Что делает этот скрипт? Он подменяет псевдо класс :hover для Интернет Эксплорера следующим способом. При событии mouseOver для элемента li скрипт добавляет ему класс sfhover для которого в свою очередь мы тоже должны прописать стиль. При событии mouseOut класс обнуляется.

#nav li.sfhover ul{
left: auto;
}

Вот по большому счету и все. Теперь меню можно украсить и использовать.

Рабочий пример можно скачать.