Адаптивное мега-меню на jQuery

Преимуществом данного меню является то, что для отображения его выпадающих списков не используются CSS-классы .

Работает оно по принципу, что если в основной раздел вложен только один подраздел, то выпадает обычное подменю, а если в этот подраздел вложены еще под-подразделы, то открывается мега-меню (в примере это 4 колонки).

Данное меню удобно настроить под свои нужны, а из-за отсутствия классов у всех списков - внедрить в любую CMS

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

Для иконок мобильного меню используется шрифт Font Awesome

Пример:

HTML:

CSS:

jQuery:

Источник: github

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Константин:

    Вообще не сработало! Только верхняя строка с меню и ни каких подменю. При уменьшении экрана полное исчезновение всего!

    Ответить
    • Alexander:

      А jQuery то подключена?
      Если да, то скрипт должен быть ниже нее.

      Ответить
      • Константин:

        Конечно же скрипт подключен. Сразу его и поставил в самый низ, а потом и на верх ставил. Увы. И понять не могу почему. В разных браузерах смотрел.

        Ответить
        • Alexander:

          Ссылку надо, угадать невозможно.

          Ответить
  • Дмитрий:

    Не подскажите как расположить пункты меню справой стороны. Меняю

    .menu > ul > li float: left; на float: right;

    но пункты меню становятся справа зеркально.

    Заранее спасибо!

    Ответить
    • Alexander:

      Добавить:

      .menu > ul {
      	text-align: right;
      }

      Заменить:

      .menu > ul > li {
      	float: left;
      }

      На:

      .menu > ul > li {
      	display: inline-block;
      	text-align: left;	
      }

      Только не забывайте что выпадайка открывается вправо и может не уместиться на последних пунктах меню.

      Ответить
  • Борис:

    Круть! Данке Шён! Мулцумеск! Рахмет! Than You!
    Запарился искать отличное меню, а оно вон где спряталось, на Вашем сайте!

    Спасибо!

    А вопросик можно?
    Как сделать так, чтобы в адаптивном варианте при клике на один подраздел — другой открытый раздел закрывался бы, как в аккордеоне?

    Ответить
    • Alexander:

      Вместо:

       $(this).children("ul").fadeToggle(150);

      Ставим:

      $(".menu > ul > li").children("ul").fadeOut(150);
      $(this).children("ul:hidden").fadeIn(150);
      Ответить
  • Дмитрий:

    Доброго времени суток.
    Почему у меня в 3 строке js, одинокая стрелочка перед ul в скобках, ошибку даёт?

    Ответить
    • Alexander:

      А какую ошибку?
      И тут посмотрел, и в вакууме локально и на codepen кинул код — ошибок нет…
      Может версия jQuery?

      Ответить
  • Андрей:

    Без демо ничего не понятно. Скопировал код вставил в html, адаптивности нет…

    Ответить
    • Alexander:

      Для демо сузьте окно браузера

      Ответить