Вы здесь: Главная » Wordpress » Создание мегаменю в WordPress c помощью jQuery-плагина megamenu.js

Создание мегаменю в WordPress c помощью jQuery-плагина megamenu.js

Большинство тем WordPress на данный момент поддерживают выпадающее многоуровневое меню, вложенность которого предполагает, что меню второго уровня появляется под первым, меню третьего уровня - как правило сбоку от второго и т.д. Однако, если вы выводите в меню название записей (постов), и они (названия) у вас достаточно длинные, такое меню вряд ли будет красиво смотреться. Поэтому возникает вопрос об использовании так называемых мегаменю, которые чаще всего выводятся с помощью плагинов WordPress.

Пример мегаменю

Использование плагинов WordPress для создания мегаменю

Целью этой статьи является самостоятельное создание кода для мегаменю с помощью jQuery-плагина, но, возможно, этот вариант подойдет не для всех. Поэтому остановимся на плагинах WordPress, которые помогут вам это осуществить.

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

Бесплатные плагины мегаменю WordPress

Как правило, эти плагины уже содержат в своем названии слово "megamenu". Их можно скачать из репозитория плагинов WordPress, однако бесплатно вы получите часть функционала. За большее вам придется выложить какую-то сумму на официальном сайте плагина. Тем не менее, и бесплатного функционала вполне может хватить для ваших целей.

Max Mega Menu

Max Mmegamenu

Скачать Оффсайт Видео

Меню, которое вы можете создать с помощью плагина Max Mega Menu, позволяет выстраивать пункты меню в виде столбцов, добавлять виджеты, иконки, в том числе и на соцсети, причем текст пункта меню можно скрыть, создавать поле поиска, выравнивать пункты по левому или правому краю контейнера. Также можно создавать или настраивать цветовые темы, меняя цвет текста и фона меню.

Платная версия - от $29.

WP Mega Menu

WP Mega Menu

Скачать Оффсайт

WP Mega Menu позволяет сделать массу вещей, хотя его функционал подобен Max Mega Menu. Вы выстраиваете пункты в столбцы, перетягивая их так, как вам нужно, можете добавить иконки, добавлять изображения и виджеты. Есть возможность создавать вкладки-табы и настраивать цветовые схемы.

Перетаскивание виджетов в wp-mega-menu

Вы можете посмотреть документацию по плагину на английском языке. Но с Google или Яндекс-переводчиком это не проблема.

Продвинутую версию можно купить на Envato за $19. За эти деньги вы получаете не только горизонтальное, но и вертикальное мега-меню, массу цветовых схем, возможность добавлять карты Google, контактные формы и фоновые изображения, а также товары из woocommerce. Можно посмотреть демо WP Mega Menu Pro для того, чтобы представить весь функционал.

WP Mega Menu Pro

QuadMenu

Quad Menu

Это меню существует как в виде общего плагина для любой темы, так и в виде отдельных плагинов для ряда тем WordPress. Меню поддерживает цветовые схемы, изображения, размещение пунктов в несколько столбцов, карусель, вкладки, размещение логотипа слева/справа от меню и т.д.

Скачать Демо Видео

Pro-версия обойдется вам в сумму от $15.

Платные плагины

UberMenu

Uber Megamenu

Демо Купить

Очень интересный плагин, лидер продаж на Envato Market - порядка 80 тысяч проданных экземпляров плагина. Его функционал позволяет размещать пункты меню в виде столбцов, добавлять изображения, в том числе и для фона, карты Google, формы, табы с переключением между разным контентом. И, конечно, он позволяет настраивать нужные вам цветовые схемы для текста и для фона меню.

Плагин хорошо задокументирован, правда, на английском языке.

На момент написания статьи стоимость $25.

MDF Megamenu

MDF Megamenu

Купить Демо Видео

Более дешевый плагин - его стоимость $16. Сделан на основе Bootstrap 3.  Плюсы MDF Megamenu: для меню можно выбирать одну из 20 анимаций, как будет показано выпадающее меню - по клику или по наведению курсора мыши, цветовую схему, будет ли у вас статическое, прилипающее или фиксированное меню.

В демо-версии меню отлично смотрится блок с товарами (на скриншоте), но для реального магазина такой вариант не всегда применим. Скорее он будет интересен парикмахерскому салону, например.

С визуальной точки зрения плагин смотрится хуже, чем UberMenu, но и стоит вдвое дешевле. К его минусам можно отнести то, что при наведении можно увидеть эффект мигания выпадающего блока.

Mega Menu Monster

Megamenu Monster

Еще один плагин мегаменю, позволяющий добавлять картинки, видео, иконки, карты, работать с Woocommerce и Visual Composer. В демо-ссылках вы найдете одну, позволяющую настраивать это меню в консоли WordPress.

Его можно купить за $16 или посмотреть демо, а также видео по настройкам плагина Mega Menu Monster.

Другие платные плагины мегаменю:

  1. Clever Mega Menu for Elementor - $39
  2. Hero Menu - $20
  3. MEGA | Responsive Megamenu Navigation - $7
  4. Sky Mega Menu - $6
  5. Responsive Mega Menu for Bootstrap - $6
  6. Mega Main Menu - $16
  7. Modern Megamenu - Bootstrap 4 Responsive Mega Menu - $8
  8. Bootstrap 4 Mega Menu - $10
  9. 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-файл самого плагина.

HTML-разметка кода меню выглядит как разметка обычного вложенного списка внутри div-ов-оберток с классами menu-container и menu:

Вариант стандартного оформления мегаменю вы можете посмотреть в официальном демо megamenu.js:

See the Pen megamenu.js - Last responsive megamenu you'll ever need by Mario Loncarek (@riogrande) on CodePen.18892

Интеграция megamenu.js в WordPress

При интеграции данного меню в WordPress придется сделать дополнительные действия, например, убрать лишние классы из разметки стандартного меню в файле functions.php вашей текущей темы:

В файле functions.php  у вас, скорей всего, есть строчки для регистрации основного (primary) меню:

Теперь в файле header.php нам нужно добавить блок, который отвечает за вывод нашего основного меню:

Далее нам нужно подключить css-стили и js-файлы в файле functions.php:

Разумеется, вам нужно будет поместить папки 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()) вам нужно обернуть скрипт плагина в такой вариант вызова функции:

Вот, собственно, и все. Осталась работа со стилями, но она настолько индивидуальна и зависит от дизайна вашего сайта (темы), что со стилями меню вам придется повозится самостоятельно.

Пример шапки сайта (header-a) с использованием мегаменю

В примере ниже изменены стили для меню с добавлением svg-иконок вместо использования иконочного шрифта. Изображения были взяты с сайта flaticon.com и закодированы с помощью asiteaboutnothing.net. Здесь нет php-кода, характерного для файлов темы WordPress, но html-разметка близка к той, что бывает в файле header.php.

See the Pen Мега-меню на основе megamenu.js by Elen (@ambassador) on CodePen.18892

Кстати, при просмотре примера вы можете скрыть боковую колонку сайта, кликнув на двойной стрелке » возле поля поиска.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *