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

Выпадающее меню с двумя уровнями вложения

Разметка горизонтального многоуровневого меню базируется на css-позиционировании. Всем элементам списка li задается относительное позиционирование, а выпадающему меню ul любого уровня — абсолютное позиционирование.

По умолчанию ширина выпадающего меню равна ширине элемента списка, в который оно вложено. Чтобы изменить ширину, нужно её задать при помощи свойства width, например, .submenu {width: 300px;}.

Выпадающее меню первого уровня вложения не требует задания смещения, абсолютное позиционирование делает его высоту равной нулю, чтобы не оставлять пустое место под элементом списка. Для меню второго уровня задаётся смещение относительно левой и верхней границы элемента списка ul {left: 100%; top: 0;}

Пример 1. Выпадающее многоуровневое меню с эффектом вращения

See the Pen ozvvyp by Elena (@html5book) on CodePen.

Выпадающее меню скрывается с помощью .submenu {visibility: hidden; opacity: 0;}, показывается li:hover > .submenu {visibility: visible; opacity: 1;}.

Пример 2. «Подъезжающее» подменю

See the Pen VKkkxX by Elena (@html5book) on CodePen.

Смещаем подменю .submenu {transform: translateY(10px);} по горизонтали, скрываем его при помощи visibility: hidden; opacity: 0;. При наведении на элемент списка меню становится видимым и перемещается вверх на 10px. Для отображения галочки не забудьте подключить FontAwesome.

  • Создание Сайтов

    Хорошее меню. Надо попробовать подключить его к вордпрессу. Там с этим всегда проблема. А то у меня на случай, если клиенту понадобится многоуровневая модель, и нет ничего.

    • Разметка универсальная, поэтому если посмотреть классы или id элементов меню шаблона, а потом подключить к ним соответствующие стили, то проблем быть не должно

      • Создание Сайтов

        Пока еще не придумал, как в ссылку на вордпресс прописать span …

      • Создание Сайтов

        Скопировал код. Попробовал и увидел, что внизу всех 3 блоков торчат рога.

      • Создание Сайтов

        P.S. там у меня стили были к спискам выше прописаны. Поэтому рога торчали. Убрал.

        • Да, это распространённая проблема, когда на элементы действуют унаследованные стили. Я поэтому все примеры и делаю во встроенном редакторе, чтобы был чистый пример, работающий.

  • Mihail

    от куда пустое пространство между .menu > li ???

    • вы про это пространство?

      • Mihail

        я о том пространстве которое появляется между инлайн элементами .main > li (которое образовывается в следствии переноса строки или пробела после тегов)
        проблему можно решить float: left + очистка через псевдокласс на родителе (правда появляется друга проблема это центрирование) , или в html коде убрать пробелы и переносы

        • я вас поняла. на самом деле не всегда требуется убирать это пространство.

      • Mihail
      • Mihail

        в ваших примерах этого не заметно так как у вас только одна сторона border и фон родителя сливается с фоном элемента

        • хотя их можно убрать, чтобы расстояния слева и справа выглядели одинаковыми, раз уж есть визуальный разделитель. при display:inline-block можно использовать отрицательный margin, как вариант.

      • Mihail

        хотя проблема с центрированием решается тоже просто c display: inline-block; text-align: center; vertical-align: top; (что бы убрать хвосты).
        http://plnkr.co/edit/FSECnWHH1QsuGWphVnUw?p=preview

        • приятно видеть таких подкованных читателей на своём сайте ))
          а ещё можно сделать всё очень красиво и без костылей с помощью модели flexbox. правда до сих пор отпугивает отсутствие поддержки со стороны старых браузеров. но и эту проблему можно решить с помощью библиотеки Modernizr. когда она обнаруживает свойство, не поддерживаемое тем или иным браузером, она добавляет элементам специальные стили, которые мы прописываем на такой случай. то есть просто меняет стили один на другой.

  • Павел Иванов

    как сложно (: надеюсь я научусь делать это

    • Пробуйте, если что-то не поймёте — спрашивайте, так быстрее разберётесь.

  • игорь куренков

    Здравствуйте. Подскажите, пожалуйста, в чем отличие табов от двухуровневого меню? У меня на сайте меню сделано с помощью табов. Нашел вашу статью и хочу реализовать меню трехуровневое, так как мне нужны категории третьего уровня еще? Это скажется на продвижении?

    • Здравствуйте. Табы — это вкладки, они работают по принципу страниц браузера, когда мы открываем их в новой вкладке. В случае табов переход осуществляется не по урл, а по якорю. Обычно вкладки используют для компактного размещения какой-либо связанной информации, но не для навигации по сайту. Можно сказать, что табы — это локальная навигация в пределах одной страницы. Поэтому в вашем случае нужно делать многоуровневое меню.
      Для поисковых роботов можно сделать sitemap с отображением всей иерархии.
      Чтобы не запутаться с разметкой, сначала сделайте три отдельных меню ul, а потом вложите в нужные элементы списка li.

  • Pavel T.

    Подскажите, как сделать, чтобы вкладки были отцентрованы, заранее спасибо.

    • Если вы имеете ввиду, как центрировать выпадающее меню относительно верхнего пункта меню, то нужно высчитать величину смещения следующим образом: смотрите ширину элемента списка (право

      • Pavel T.

        Я имею ввиду расположить меню 1 уровня по середине страницы, сейчас вкладки располагаются слева

        • Второй пример расположен по середине. Для первого добавьте