Мега меню Bootstrap 3-4

Опубликовано: 01.09.2018

Что такое мега меню?

Мега меню позволяет расширить область выпадающего списка меню, с возможностью добавлять в него разнообразный HTML контент, — картинки, списки, виджеты и пр.

Для WordPress есть готовые плагины для превращения стандартного меню в мега меню. Один из популярных плагинов Max Mega Menu . На его официальной странице можно посмотреть примеры возможностей и как это выглядит.

Yamm и Bootstrap 3

Yamm (Yet another megamenu) — легковесной CSS мегаменю, который позволяет использовать в нём любые компоненты Bootstrap 3.

В yamm всего два десятка строк CSS и несколько правил. Кстати, в архиве есть также файлы Less и Sass для подключения в своей теме.

Использование предельно простое. Добавляется класс yamm в тег навигации nav. По желанию, в разметку выпадающего списка можно вставить класс yamm-content для обрамления паддингами.

Также, в элемент списка с классом dropdown можно добавить класс yamm-fw для использования на полную ширину (fullwidth).

<nav class="navbar yamm navbar-default " role="navigation"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> <ul class="dropdown-menu"> <li> <div class="yamm-content"> <div class="row"> ... </li> </ul> </li> </ul> </nav>

к содержанию ↑

Как подключить Yamm в WordPress

Для WordPress есть класс macdonaldr93/yamm-nav-walker .

Php файл класса подключается в functions.php:

require_once('yamm-nav-walker.php');

Учитывается, что Yamm и Bootstrap у вас установлены.

В header.php прописываем следущую функцию:

<?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary', 'depth' => 4, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav yamm', 'fallback_cb' => 'Yamm_Nav_Walker_menu_fallback', 'walker' => new Yamm_Nav_Walker()) ); ?>

Также можно использовать полную ширину мегаменю. Для этого меняем класс и функцию колбэк.

'fallback_cb' => 'Yamm_Fw_Nav_Walker_menu_fallback', 'walker' => new Yamm_Fw_Nav_Walker())

к содержанию ↑

Мега меню для Bootstrap 4

Классы Bootstrap 4 отличаются от третьей версии, поэтому Yamm работает с ним неправильно.

Я нашел рабочую статью как реализовать мегаменю для Bootstrap 4 по адресу http://fellowtuts.com/twitter-bootstrap/mega-menu-multi-column-container-bootstrap-nav-dropdown/ с кодом и пояснениями.

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

IRC (Internet Relay Chat)
rss