Мега меню Bootstrap 3-4 • WP Best

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

Мега меню позволяет расширить область выпадающего списка меню, с возможностью добавлять в него разнообразный 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 есть и его можно использовать.

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
0
Оставьте комментарий.x
()
x
Пролистать наверх