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

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

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

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

<ul id="nav">
    <li>
    <а hrеf="#">Percoidei</a>
        <ul>
            <li><а hrеf="#">Remoras</a>
                <ul>
                    <li><а hrеf="#">Echeneis</a></li>
                    <li><а hrеf="#">Phtheirichthys</a></li>
                    <li><а hrеf="#">Remora</a></li>
                    <li><а hrеf="#">Remorina</a></li>
                    <li><а hrеf="#">Rhombochirus</a></li>
                </ul>
            </li>
            <li><а hrеf="#">Tilefishes</a></li>
            <li><а hrеf="#">Bluefishes</a></li>
            <li><а hrеf="#">Tigerfishes</a></li>
            </ul>
        </li>
    <li><а hrеf="#">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

14 thoughts on “Выпадающее меню

  1. Круто, только что опробовал на реальном проекте.
    Вопрос: а можно как-нибудь модифицировать данный вариант меню, чтобы меню второго уровня не появлялась сразу при наведении на родительский элемент, а плавно выезжала. А то я в JS далеко не Бог, а сделать нужно…:)

  2. Gorik

    То что модифицировать можно, это точно :) Но я сам тоже не пробовал.

    Если сделаю, выложу.

  3. > neutrino

    Ещё вопрос: Вы не знаете, почему в IE6/IE7 эта менюшка жутко глючит? Вот пример странички, где я её использовал. Браузер тормозит просто ужасно, я уж и не знаю что делать. Может что посоветуете?

    P.S. Флешка на это никак не влияет, пробовал заливать обычную имагу вместо неё, тормоза всё равно остаются :(

  4. Прив, коллеги! Выпадающее меню уже сделал: все пащет на “ура” (можете поглядеть, тока осталось сделать одну вещичку: я хочу, чтобы при наведении мышой на тусклый банер, он, банер, ПЛАВНО загорался. Кто знает, как это забодяжить? Пишите на мыло: gamlet-petr@mail.ru.

    P.S. Кто хочет бесплатно обменяться банерами – пишите на sotmania@narod.ru.

  5. А как модифицировать скрипт, чтобы меню работало на любое количество вложений? Или хотя бы 3-4. Я нигде такой инфы не нашел, может быть вы поможете чем

  6. [quote post=”48″]Посмотри здесь, Максим.[/quote]
    Спасибо огромное!! То что надо!

  7. Один момент я хотел бы отметить, точнее спросить – как можно сделать чтобы между самым верхним пунктом меню и тем что из него выпадает была прозрачная полоска, ну чтоб видно было что под ним, грубо говоря чтобы то что из него выпадает было смещено вниз, в данном примере пробовал рулить свойством margin и как то не получилось, подскажите плиз в чем проблема. Заранее спасибо

  8. to Алексей

    :hover – упрямая штука. Если сделать большой отступ, то выпадающий список будет пропадать, когда ты будешь убирать мышку с родительского списка. Здесь уже без JS не обойтись, чтобы реализовать задержку. Вадим “pepelsbey” Макеев отлично справился с этой задачей.

  9. Вот бьюсь уже не первый день с такова типа менюшками.. У меня проблема такая: у всех меню такого типа выпадающий блок имеет четко заданную ширину, а мне надо, чтобы он растягивался и чтоб растягивались на всю длинну, входящие в него тк они имеют своё оформления и когда они разной длинны – получается некрасиво.. ещё проблема возникает, если растянуть само меню на 100% по ширине: некоторые блоки не раскрываются вообще.. вот такие дела(( подскажите пожалуйста, есть ли решение проблемы.. мой адрес taurlom@mail.ru.. заранее спасибо..

  10. taurlom,
    я не совсем понял какое меню вам нужно. зачем растягивать его на 100%?

  11. [quote comment="2056"]taurlom, я не совсем понял какое меню вам нужно. зачем растягивать его на 100%?[/quote]

    Меню должно выглядеть так как сдесь: http://rada.ru/ только чтоб работало в Мозиле..

  12. У меня всё работает только в мозиле и опере,а на эксплорере работает только первый блок меню(остальные не работают).
    Что делать?
    И ещё вопрос.
    Как бороться с левым меню?(чтобы оно выпадало справа)

Leave a Reply

Your email address will not be published. Required fields are marked *