Создание многоуровнего выпадающего меню с помощью 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(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);Что делает этот скрипт? Он подменяет псевдо класс :hover для Интернет Эксплорера следующим способом. При событии mouseOver для элемента li скрипт добавляет ему класс sfhover для которого в свою очередь мы тоже должны прописать стиль. При событии mouseOut класс обнуляется.
#nav li.sfhover ul{
left: auto;
}Вот по большому счету и все. Теперь меню можно украсить и использовать.
Рабочий пример можно скачать.
По материалам HTML dog
Круто, только что опробовал на реальном проекте.
Вопрос: а можно как-нибудь модифицировать данный вариант меню, чтобы меню второго уровня не появлялась сразу при наведении на родительский элемент, а плавно выезжала. А то я в JS далеко не Бог, а сделать нужно…:)
Gorik
То что модифицировать можно, это точно :) Но я сам тоже не пробовал.
Если сделаю, выложу.
Ждём с нетерпением :)
> neutrino
Ещё вопрос: Вы не знаете, почему в IE6/IE7 эта менюшка жутко глючит? Вот пример странички, где я её использовал. Браузер тормозит просто ужасно, я уж и не знаю что делать. Может что посоветуете?
P.S. Флешка на это никак не влияет, пробовал заливать обычную имагу вместо неё, тормоза всё равно остаются :(
Прив, коллеги! Выпадающее меню уже сделал: все пащет на “ура” (можете поглядеть, тока осталось сделать одну вещичку: я хочу, чтобы при наведении мышой на тусклый банер, он, банер, ПЛАВНО загорался. Кто знает, как это забодяжить? Пишите на мыло: gamlet-petr@mail.ru.
P.S. Кто хочет бесплатно обменяться банерами – пишите на sotmania@narod.ru.
А как модифицировать скрипт, чтобы меню работало на любое количество вложений? Или хотя бы 3-4. Я нигде такой инфы не нашел, может быть вы поможете чем
[quote post="48"]Или хотя бы 3-4.[/quote]
Посмотри здесь, Максим.
[quote post="48"]Посмотри здесь, Максим.[/quote]
Спасибо огромное!! То что надо!
Один момент я хотел бы отметить, точнее спросить – как можно сделать чтобы между самым верхним пунктом меню и тем что из него выпадает была прозрачная полоска, ну чтоб видно было что под ним, грубо говоря чтобы то что из него выпадает было смещено вниз, в данном примере пробовал рулить свойством margin и как то не получилось, подскажите плиз в чем проблема. Заранее спасибо
to Алексей
:hover – упрямая штука. Если сделать большой отступ, то выпадающий список будет пропадать, когда ты будешь убирать мышку с родительского списка. Здесь уже без JS не обойтись, чтобы реализовать задержку. Вадим “pepelsbey” Макеев отлично справился с этой задачей.
Вот бьюсь уже не первый день с такова типа менюшками.. У меня проблема такая: у всех меню такого типа выпадающий блок имеет четко заданную ширину, а мне надо, чтобы он растягивался и чтоб растягивались на всю длинну, входящие в него тк они имеют своё оформления и когда они разной длинны – получается некрасиво.. ещё проблема возникает, если растянуть само меню на 100% по ширине: некоторые блоки не раскрываются вообще.. вот такие дела(( подскажите пожалуйста, есть ли решение проблемы.. мой адрес taurlom@mail.ru.. заранее спасибо..
taurlom,
я не совсем понял какое меню вам нужно. зачем растягивать его на 100%?
[quote comment="2056"]taurlom, я не совсем понял какое меню вам нужно. зачем растягивать его на 100%?[/quote]
Меню должно выглядеть так как сдесь: http://rada.ru/ только чтоб работало в Мозиле..