Большинство тем WordPress на данный момент поддерживают выпадающее многоуровневое меню, вложенность которого предполагает, что меню второго уровня появляется под первым, меню третьего уровня - как правило сбоку от второго и т.д. Однако, если вы выводите в меню название записей (постов), и они (названия) у вас достаточно длинные, такое меню вряд ли будет красиво смотреться. Поэтому возникает вопрос об использовании так называемых мегаменю, которые чаще всего выводятся с помощью плагинов WordPress.
Использование плагинов WordPress для создания мегаменю
Целью этой статьи является самостоятельное создание кода для мегаменю с помощью jQuery-плагина, но, возможно, этот вариант подойдет не для всех. Поэтому остановимся на плагинах WordPress, которые помогут вам это осуществить.
Все перечисленные плагины поддерживают адаптивность, т.е. меняют свой внешний вид на мобильных и планшетах. Для этого во многих из них существуют специальные настройки.
Бесплатные плагины мегаменю WordPress
Как правило, эти плагины уже содержат в своем названии слово "megamenu". Их можно скачать из репозитория плагинов WordPress, однако бесплатно вы получите часть функционала. За большее вам придется выложить какую-то сумму на официальном сайте плагина. Тем не менее, и бесплатного функционала вполне может хватить для ваших целей.
Max Mega Menu
Меню, которое вы можете создать с помощью плагина Max Mega Menu, позволяет выстраивать пункты меню в виде столбцов, добавлять виджеты, иконки, в том числе и на соцсети, причем текст пункта меню можно скрыть, создавать поле поиска, выравнивать пункты по левому или правому краю контейнера. Также можно создавать или настраивать цветовые темы, меняя цвет текста и фона меню.
Платная версия - от $29.
WP Mega Menu
WP Mega Menu позволяет сделать массу вещей, хотя его функционал подобен Max Mega Menu. Вы выстраиваете пункты в столбцы, перетягивая их так, как вам нужно, можете добавить иконки, добавлять изображения и виджеты. Есть возможность создавать вкладки-табы и настраивать цветовые схемы.
Вы можете посмотреть документацию по плагину на английском языке. Но с Google или Яндекс-переводчиком это не проблема.
Продвинутую версию можно купить на Envato за $19. За эти деньги вы получаете не только горизонтальное, но и вертикальное мега-меню, массу цветовых схем, возможность добавлять карты Google, контактные формы и фоновые изображения, а также товары из woocommerce. Можно посмотреть демо WP Mega Menu Pro для того, чтобы представить весь функционал.
QuadMenu
Это меню существует как в виде общего плагина для любой темы, так и в виде отдельных плагинов для ряда тем WordPress. Меню поддерживает цветовые схемы, изображения, размещение пунктов в несколько столбцов, карусель, вкладки, размещение логотипа слева/справа от меню и т.д.
Pro-версия обойдется вам в сумму от $15.
Платные плагины
UberMenu
Очень интересный плагин, лидер продаж на Envato Market - порядка 80 тысяч проданных экземпляров плагина. Его функционал позволяет размещать пункты меню в виде столбцов, добавлять изображения, в том числе и для фона, карты Google, формы, табы с переключением между разным контентом. И, конечно, он позволяет настраивать нужные вам цветовые схемы для текста и для фона меню.
Плагин хорошо задокументирован, правда, на английском языке.
На момент написания статьи стоимость $25.
MDF Megamenu
Более дешевый плагин - его стоимость $16. Сделан на основе Bootstrap 3. Плюсы MDF Megamenu: для меню можно выбирать одну из 20 анимаций, как будет показано выпадающее меню - по клику или по наведению курсора мыши, цветовую схему, будет ли у вас статическое, прилипающее или фиксированное меню.
В демо-версии меню отлично смотрится блок с товарами (на скриншоте), но для реального магазина такой вариант не всегда применим. Скорее он будет интересен парикмахерскому салону, например.
С визуальной точки зрения плагин смотрится хуже, чем UberMenu, но и стоит вдвое дешевле. К его минусам можно отнести то, что при наведении можно увидеть эффект мигания выпадающего блока.
Mega Menu Monster
Еще один плагин мегаменю, позволяющий добавлять картинки, видео, иконки, карты, работать с Woocommerce и Visual Composer. В демо-ссылках вы найдете одну, позволяющую настраивать это меню в консоли WordPress.
Его можно купить за $16 или посмотреть демо, а также видео по настройкам плагина Mega Menu Monster.
Другие платные плагины мегаменю:
- Clever Mega Menu for Elementor - $39
- Hero Menu - $20
- MEGA | Responsive Megamenu Navigation - $7
- Sky Mega Menu - $6
- Responsive Mega Menu for Bootstrap - $6
- Mega Main Menu - $16
- Modern Megamenu - Bootstrap 4 Responsive Mega Menu - $8
- Bootstrap 4 Mega Menu - $10
- CSS3 Flat Mega Menu - $2 (последнее обновление в августе 2018)
Как видите, вариантов достаточно много, и по приемлемой цене.
Создаем мегаменю для WordPress без плагина
Коль вы дочитали до этого места, плагины WordPress вам по каким-то причинам не подходят. Достаточно часто такой причиной является низкий показатель скорости вашего сайта в Google PageSpeed Insights, например. Т.е. вам нужно, чтобы было красиво, функционально, но ни картинки, ни большой набор иконок вас не интересуют, т.к. меню, как и сайт, должно быть максимально простым, удобным и маловесным с точки зрения разметки, css-стилей и js-кода. Тогда представленный ниже код - это для вас.
Правда совсем без плагина мы не обойдемся, но в данном случае под термином "плагин" подразумевается плагин jQuery megamenu.js.
Плагин megamenu-js имеет следующие характеристики (с сайта разработчиков):
- Кроссбраузерный
- Не использует дополнительные классы для выпадающих списков
- Разумный - понимает, когда нужно отобразить мегаменю, а когда - обычное выпадающее меню
- 100% адаптивный, работает на всех устройствах
- Отлично интегрируется в WordPress
- Очень быстрый
- Использует анимацию на основе jquery (поэтому совместим с IE8)
- Прост в использовании
- Написан на LESS (легко изменить стили)
- Использует ionicons
- Супермаленький
- Распространяется бесплатно (лицензия MIT)
Как использовать megamenu.js на html-странице
Для работы с плагином на html-страницах необходимо подключить 2 css-файла, jquery и один js-файл самого плагина.
| 1 2 3 4 5 | <link rel="stylesheet" href="css/ionicons.min.css"> <link rel="stylesheet" href="css/megamenu-style.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="js/megamenu.js"></script> |
HTML-разметка кода меню выглядит как разметка обычного вложенного списка внутри div-ов-оберток с классами menu-container и menu:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="menu-container"> <div class="menu"> <ul> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a> <ul> <li><a href="#">Пункт 2.1</a></li> <li><a href="#">Пункт 2.2</a></li> <li><a href="#">Пункт 2.3</a></li> </ul> </li> <li><a href="#">Пункт 3</a> </ul> </div> </div> |
Вариант стандартного оформления мегаменю вы можете посмотреть в официальном демо megamenu.js:
See the Pen megamenu.js - Last responsive megamenu you'll ever need by Mario Loncarek (@riogrande) on CodePen.
Интеграция megamenu.js в WordPress
При интеграции данного меню в WordPress придется сделать дополнительные действия, например, убрать лишние классы из разметки стандартного меню в файле functions.php вашей текущей темы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Удаляем div-контейнер для Wordpress навигации function my_wp_nav_menu_args($args = '') { $args['container'] = false; return $args; } // Удаляем встроенные классы, ID элементов и страниц из разметки элементов <li> function my_css_attributes_filter($var) { return is_array($var) ? array() : ''; } add_filter('wp_nav_menu_args', 'my_wp_nav_menu_args'); // фильтр для удаления div-а-контейнера add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1); // удаляем классы для <li> add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); // удаляем id для <li> add_filter('page_css_class', 'my_css_attributes_filter', 100, 1); // удаляем id страниц для <li> |
В файле functions.php у вас, скорей всего, есть строчки для регистрации основного (primary) меню:
| 1 2 3 4 | // This theme uses wp_nav_menu() in one location. register_nav_menus(array( 'primary' => esc_html__('Primary Menu', 'theme-slug'), )); |
Теперь в файле header.php нам нужно добавить блок, который отвечает за вывод нашего основного меню:
| 1 2 3 4 5 6 7 8 9 | <?php if (has_nav_menu('primary')): ?> <div class="menu-container"> <div class="menu"> <?php wp_nav_menu( array('theme_location' => 'primary') ); ?> </div> </div> <?php endif;?> |
Далее нам нужно подключить css-стили и js-файлы в файле functions.php:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //определяем константу, содержащую ссылку на папку темы //эту строку обычно прописывают в самом верху файла functions.php, чтобы использовать вместо функции get_template_directory_uri() define('THEME_URI', get_template_directory_uri()); //создаем функцию для добавления стилей и скриптов function theme_slug_scripts() { wp_enqueue_style('theme-slug-style', THEME_URI . '/style.css', array(), '1.0'); wp_enqueue_style('theme-slug-ionicons', THEME_URI . '/css/ionicons.min.css', array(), '1.0'); wp_enqueue_style('theme-slug-megamenu-style', THEME_URI . '/css/megamenu-style.min.css', array('theme-slug-ionicons'), '1.0'); if (is_singular() && comments_open() && get_option('thread_comments')) { wp_enqueue_script('comment-reply'); } //подключаем скрипт мега-меню перед закрывающим тегом </body> wp_enqueue_script('theme-slug-megamenu',THEME_URI . '/js/megamenu.js', array('jquery'), '1.0', true); } add_action('wp_enqueue_scripts', 'theme_slug_scripts'); |
Разумеется, вам нужно будет поместить папки css и js, скачанные с репозитория плагина megamenu-js в корень своей папки с темой. Также вы должны поместить папку fonts из плагина, которая содержит файлы иконочного шрифта ionicons, в папку с темой. Если у вас уже есть такие папки, просто добавьте файлы плагина в них. Если такие папки находятся в вашей теме в папке assets, например, то измените путь к папкам в коде функции theme_slug_scripts().
Примечание: функция theme_slug_scripts(), вполне возможно, уже существует в вашей теме, но с другим именем. В этом случае вам нужно добавить в нее часть кода, связанного с подключением css и js из плагина megamenu.js.
Изменяем код в js-файле плагина
Теперь важно учесть еще один момент, связанный с оформлением js-файла плагина. Возможно, вы обратили внимание, что мы нигде не подключали jQuery. Это происходит потому, что эта библиотека подключается в WordPress автоматически, т.к. многие вещи как в консоли, так и в теме работают на основе jQuery. Для того чтобы интерпретатор браузера понимал переменную в виде $, которая позволяет обращаться к различным селекторам в документе, необходимо ее явно указать при вызове скрипта.
Изменения будут совсем несложными, и касаются они начала и конца скрипта. Вместо стандартного для использования jQuery $(document).ready(function()) вам нужно обернуть скрипт плагина в такой вариант вызова функции:
| 1 2 3 4 5 6 7 8 9 10 11 12 | //вместо /*global $ */ $(document).ready(function () { // скрипт плагина ... }); //записываем (function($) { // скрипт плагина ... })(jQuery); |
Вот, собственно, и все. Осталась работа со стилями, но она настолько индивидуальна и зависит от дизайна вашего сайта (темы), что со стилями меню вам придется повозится самостоятельно.
Пример шапки сайта (header-a) с использованием мегаменю
В примере ниже изменены стили для меню с добавлением svg-иконок вместо использования иконочного шрифта. Изображения были взяты с сайта flaticon.com и закодированы с помощью asiteaboutnothing.net. Здесь нет php-кода, характерного для файлов темы WordPress, но html-разметка близка к той, что бывает в файле header.php.
See the Pen Мега-меню на основе megamenu.js by Elen (@ambassador) on CodePen.
Дополнение: при тестировании на iPhone с измененными стилями плагин стал несколько глючить, выдавая очень быстрое сворачивание-разворачивание меню при клике на "+". Поэтому пришлось несколько дополнить код плагина и изменить стили для мобильной версии, чтобы убрать этот глюк. Кроме того, теперь при клике знак "+" меняется на "-" у того меню, которое разворачивается. Вы можете изменять стили для класса plus в зависимости от выбранного шрифта и отступов.
Вторая версия примера а-ля мегаменю в WordPress представлена ниже:
See the Pen Дополненный скрипт megamenu.js by Elen (@ambassador) on CodePen.
Кстати, при просмотре примера вы можете скрыть боковую колонку сайта, кликнув на двойной стрелке » возле поля поиска.
Бонус. Мега-меню только на CSS
Однако, не только с помощью плагинов можно реализовать мега-меню. Возможно это сделать и с помощью HTML + CSS. Для этого нам понадобятся переключатели <input type="radio"> и свойства Flexbox-модели. И, конечно же список для ссылок.
See the Pen Responsive Mega Menu and Dropdown Menu by Elen (@ambassador) on CodePen.
