Мега меню 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 есть и его можно использовать.