Горизонтальное выпадающее меню на jQuery

Сегодня я расскажу как легко сделать горизонтальное выпадающее меню на jQuery. В силу его понятности и простоты его можно быстро приспособить к любому дизайну. Например, буквально сегодня, я вставил такое горизонтальное меню в проект на CMS Битрикс. К слову, этот скрипт входит в мою копилку сниппетов.

Html-код меню должен иметь такой вид:

Теперь CSS. Вся прелесть данного скрипта в минимальном использовании селекторов. Фактически, нужен всего лишь ID для списка. Итак, нужно выстроить первый уроверь меню в линию, скрыть вложенные уровни и добавить необходимое оформление. На нашем примере это выглядит так:

А вот и сам скрипт. Обработчики событий привязываются к элементам LI. При наведении на пункт меню скрываем предыдущий открытый вложенный список (если виден) и открываем новый. Когда курсор убираем  — ждем 500мс и закрываем список.

Как видите, все действительно просто, а главное кроссбраузерно: IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+

Смотрите ДЕМО.

За скрипт спасибо Javascript Array

  • Dmitry

    В чем преимущество решения на jQuery перед CSS-меню?

    • Это просто еще один способ

  • Недавно создал блог по скриптах на JQuery. Если кому то будет интересно то вот ссылка — vadyos.org.ua

  • приведенное меню можно реализовать на чистом css, используя небольшой хак для ie6.

    дополнительный яваскрипт и подключение jquery — избыточное решение.

  • А меня волнует вопрос — как вы реализовали на главной странице слайд шоу со ссылками на статьи?
    Использовали какой то плагин? Или ваше детище? 🙂
    Заранее спасибо за ответ!

    • Нет, не плагин. Это jQuery Cycle plugin + немного WordPress API + использование возможностей WordPress 3.0

      • Спасибо за ответ!
        Не планируете сделать про это такой же развернутый пост как про Горизонтальное выпадающее меню?
        Я думаю, что не я один был бы очень вам за это благодарен!

        • Думаю да, можно сделать такой пост. Правда, получится он не маленький, особенно если немного углубится в теорию)

  • С нетерпением буду ждать 🙂

  • Nigelist

    А можно ли сделать чтобы скрытые элементы меню выпадали плавно?

  • Вадим

    По не понятным мне причинам пример не работает(скопировал все как здесь). Что не так?

  • Библиотеку jquery подключи

  • А в CSS обязательно менять? Только в main.tpl не пойдет?

  • Подскажите а возможно ли выровнять это меню по центру другого блока? Спасибо.

    • Задайте ширину для #jsddm и назначьте ему margin: 0 auto

  • Кошмар, через таймер…. Да и стиль кода ужасен :))))
    вот классический пример в одну функцию без таймера и прочих ненужностей http://habrahabr.ru/blogs/jquery/39440/ (Drop-down меню)

    • Se7eN

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

      • Neolot

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

  • Scan

    Делаю так:

    [js]function SMenu_show() {
    $(this).children(‘.sub’).show();
    }
    function SMenu_hide() {
    $(this).children(‘.sub’).hide();
    }
    $(‘.ddmenu li’).bind(‘mouseenter’, SMenu_show);
    $(‘.ddmenu li’).bind(‘mouseleave’, SMenu_hide);[/js]

    Работает без таймеров.

  • Александр

    А как использовать данный код для того чтобы вывести меню на WordPress? Просто вставил код, стили к нему, но меню не стало выпадающим. Имеются страницы, которые являются дочерними для другой страницы, но они в меню не выпадают.

    http://narodnieoknant.ru/

    Вот сайт на котором я все это пробую. В пункте «Товары» должно быть два подпункта: «Окна» и «Лоджии», но они не выводятся.

    Заранее благодарю за ответ!

    • Neolot

      У вас ul имеет id=»dd», а должно быть id=»jsddm». Поправьте или в скрипте, или в меню.

      • Александр

        Всплывающие меню появились. Благодарю за помощь. Но как только указал нужный Id сразу же пропали стили оформления. Меню выровнялось по левому краю. В стилях ширина меню указана и задан margin:0 auto;

        • Neolot

          Ну со своей версткой вы уж как-нибудь сами разберитесь

          • Александр

            И почему-то на примере пункты находятся друг под другом, а у меня они слеплены в едино. Это тоже проблемы верстки?

          • Neolot

            Да, скрипт только делает меню выпадающим, а как оно выглядит визуально прописано в ваших стилях.

  • Большое спасибо все сделал, но 1 проблема, в опере все ок, а вот в хроме и фаерфоксе когда меню выпало, она находится как бы под рекламой от гугл адсенс который находится ниже. Как такое исправить?

    • Neolot

      Дело в том, что объект флэш всегда ложится поверх любого объекта на странице, поэтому выпадающее меню оказывается под ним. Чтобы решить проблему в таких случаях нужно использовать специальный параметр вызова объекта, но в adsense нельзя задавать параметры флэш. Придется либо отключить показ баннеров в этом месте, или убрать/перенести рекламный блок.

    • Евгений

      Решил проблему с меню под рекламой!!!
      Нужно вставить в СSS выпадающих пунктов меню

      z-index:9999;

      это означает, что элемент должен быть поверх всего)

  • Оперативно вы отвечаете 🙂 спасибо.
    Пришлось перенести блок рекламы, не очень конечно хотелось мне этого, но меню хочется больше.

  • ДМ

    Можно это же меню генерировать чуть проще:

    [js]function makeMenu(holder) {
    var closeTimer = null;
    var closeInterval = 300;

    $(holder).children(‘li’).mouseover(function() {
    $(holder + ‘ li ul’).hide();
    $(this).children(‘ul’).show();
    if(closeTimer) {
    window.clearTimeout(closeTimer);
    closeTimer = 0;
    }
    });
    $(holder + ‘ li’).mouseout(function() {
    if(!closeTimer) {
    closeTimer = window.setTimeout(‘$("’ + holderId + ‘ li ul").hide();’, closeInterval);
    }
    });
    }

    $(document).ready(function() {
    makeMenu(‘#jsddm’);
    }[/js]

  • Спасибо немного доработал и сделал посвоему! 🙂

  • Катя

    Спасибо за хороший код. А возможно сделать, чтобы в выпадающем списке каждая четная строка была своего цвета?

    • После строки

      добавьте строку

  • kori

    Привет. А можно сделать что бы меню выпадало и два уровня а не в один?

    • C этим скриптом нет. На днях я расскажу о другом скрипте, где возможно неограниченное количество уровней вложенности и других плюшек.

  • Вячеслав

    Клёва конечно, но я бы наверно только таймаут оставил бы, ну и + как только вижу флоат сразу блеать хоца))))

  • Михаил

    Почему это меню не работает в тачскринах на смартфонах?