Плагин WP Mega Menu: функциональные возможности, установка, настройка

 Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете о супер полезном плагине, который позволит вам создать горизонтальное выпадающее меню. Вы сможете вставлять в выпадающее меню любые виджеты, текст, редактор, фото, видео, формы, html код.

Вы сможете полностью настроить внешний вид меню и настроить выпадающее меню. Можно добавить в горизонтальное выпадающее меню до 8 восьми колонок. Можно отключить выпадающее меню для мобильных устройств. Очень гибкий плагин, вы сможете сделать Супер меню!

Установить Супер плагин Max Mega Menu вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Mega Menu. Здесь вы сможете настроить основные настройки плагина.

 General Settings.

– Click Event Behaviour, поведение при клике. Здесь у вас на выбор два варианта:

• First click will open a sub menu, second click will close the sub menu, первый клик открывает подменю, второе нажатие закрывает подменю;
• First click will open a sub menu, second click will follow the link, первый клик открывает подменю, второй клик по ссылке.
• Оставьте по умолчанию, ничего не меняйте.

– Mobile Menu Behaviour, поведение на мобильном меню,

• Standard – Open sub menus will remain open until closed by the user, Стандарт – открытое подменю будет оставаться открытым, пока его не закроет пользователь.
• Accordion – Open sub menus will automatically close when another one is opened, Аккордеон – открытые подменю будет автоматически закрываться, когда другое открыто.

– CSS Output, оставьте по умолчанию, ничего не надо менять здесь.

– Menu Item Descriptions, включить или отключить описание для пунктов меню.

– Active Menu Instances, Некоторые темы будут выводить расположение меню несколько раз на одной странице. Например, ваша тема может выводить расположение меню после главного меню, затем снова для мобильного меню. Этот параметр можно использовать, чтобы убедиться, что меню Max Mega Menu применяется только к одному из этих экземпляров.

– Сохраните сделанные изменения.

 Menu Themes.

– Select theme to edit, здесь указано меню, которое вы будете редактировать. Можно создать и выбрать другое меню.

– Theme Title, заголовок темы меню, оставьте по умолчанию.

– Arrow, можно выбрать стрелку, которая отображается в пункте меню с выпадающим меню.

– Line Height, линия высоты.

– Z Index, показатель Z Index, можно оставить по умолчанию.

– Shadow, можно настроить тень меню.

– Hover Transitions, включить переходы при наведении на пункты меню.

– Reset Widget Styling, отключить стили виджетов Mega Menu.

Menu Bar.

– Menu Height, высота меню.

– Menu Background, цвет фона меню.

– Menu Padding, обивка меню.

– Menu Border Radius, радиус границы меню.

– Menu Items Align, расположение пунктов меню.

– Menu Item Background, цвет фона пунктов меню.

– Menu Item Background (Hover), цвет фона пункта меню при наведении.

– Menu Item Spacing, интервал пунктов меню.

– Font, параметры шрифта, цвет, размер, расположение, семейство и т.д.

– Font (Hover), параметры шрифта при наведении.

– Menu Item Padding, обивка пунктов меню.

– Menu Item Border, параметры границы пункта меню.

– Menu Item Border (Hover), параметры границы пункта меню при наведении.

– Menu Item Border Radius, параметры радиуса границы пункта меню.

– Menu Item Divider, разделитель меню.

– Highlight Current Item, выделять текущий пункт меню.

Mega Menus.

– Panel Background, цвет фона выпадающего меню.

– Panel Width, ширина окна выпадающего меню.

– Panel Padding, обивка.

– Panel Border, цвет и размер границ.

– Panel Border Radius, радиус границы.

– Item Padding, обивка пункта меню в выпадающем меню.

Widgets.

– Heading Font, параметры шрифта заголовка виджета в выпадающем меню.

– Heading Padding, обивка заголовка.

– Heading Margin, отступы от границ заголовка виджета.

– Header Border, параметры границы бордюра.

– Content Font, шрифт в содержании виджета.

Second Level Menu Items.

– Font, шрифт пунктов меню второго уровня.

– Font (Hover), шрифт при наведении.

– Background (Hover), цвет фона при наведении.

– Padding, обивка.

– Margin, отступ.

– Border, бордюр, граница.

Third Level Menu Items. Те же настройки, только для пунктов меню третьего уровня.

Flyout Menus.

– Menu Background, цвет фона выпадающего меню второго или третьего уровня.

– Menu Width, ширина меню.

– Menu Padding, обивка.

– Menu Border, граница.

– Menu Border Radius, радиус границы.

– Item Background, цвет фона пункта меню.

– Item Background (Hover), цвет фона пункта при наведении.

– Item Height, высота пункта меню.

– Item Padding, обивка пункта.

– Item Font, шрифт текста в пункте меню.

– Item Font (Hover), шрифт при наведении.

– Item Divider, разделитель элемента.

Mobile menu.

– Toggle Bar Designer, здесь показано как выглядит меню на мобильных устройствах.

– Responsive Breakpoint, ширина для перехода в мобильное меню.

– Toggle Bar Background, цвет фона кнопки открытия мобильного меню.

– Disable Mobile Toggle, можно отключить переключатель меню.

– Toggle Bar Height, высота переключателя мобильного меню.

– Mega Menu Columns, сколько колонок в выпадающем меню на мобильном сайте.

– Menu Background, цвет фона мобильного меню.

– Menu Item Height, высота пункта меню.

Custom Styling. Здесь можно добавить свои CSS стили для меню.

– Сохраните сделанные изменения.

 Menu Locations.

– Registered Menu Locations, здесь вы сможете создавать области меню, в которые потом сможете добавлять меню. Чтобы создать область для меню, нажмите на кнопку – Add another menu location.

Область меню вы сможете добавлять на сайт, с помощью шорткода или php кода.

На странице: Внешний вид – Меню – Управление областями, вы сможете добавить меню для области.

 Tools.

– Cache, здесь можно очистить кэш CSS, не обязательно, кэш автоматически очищается при каждом сохранении меню.

– Plugin Data, удалить все данные плагина, сохранённые в базе данных WordPress. Только в случае удаления плагина!

– Export Theme, можно экспортировать тему мега меню в формате JSON или PHP.

– Import Theme, можно импортировать тему мега меню.

Далее, чтобы создать горизонтальное выпадающее меню, перейдите на страницу: Внешний вид – Меню. Слева у вас появится виджет “Max Mega Menu Settings”.

– Enable, поставьте здесь галочку, чтобы включить мега меню.

– Event, здесь можно выбрать как будет открываться выпадающее меню.

– Effect, можно выбрать эффект для выпадающего меню.

– Theme, тема меню, по умолчанию.

После включения мега меню, в каждом виджете страницы, при наведении, появится кнопка – Mega Menu. Нажмите на данную кнопку, чтобы настроить выпадающее меню для данного пункта меню.

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

Чтобы открыть и настроить виджет, добавить в него какое-либо содержание и т.д., справа в виджете нажмите на значок ключа. Настройте виджет и сохраните его.

Далее, слева перейдите на вкладку – Settings. Здесь можно настроить дополнительные параметры:

– Hide Text, скрыть текст из пункта меню.

– Hide Arrow, скрыть стрелку.

– Disable Link, отключить ссылку.

– Hide item on Mobile, скрыть пункт меню на мобильных устройствах.

– Hide item on Desktop, скрыть пункт меню на компьютерах.

– Menu item Align, расположение пункта меню.

– Sub Menu Align, расположение меню второго уровня.

– Hide sub menu on Mobile, скрыть меню второго уровня на мобильных устройствах.

– Сохраните изменения.

Далее, слева перейдите на вкладку – Icon. Здесь можно выбрать иконку, которая будет отображаться рядом с пунктом меню.

Всё готово! Сохраните меню, перейдите на сайт и наслаждайтесь результатом!

Внимание! После включение мега меню, стиль вашего меню по умолчанию будет полностью изменён. Вам нужно будет настраивать стиль меню в настройках, на вкладке “Menu Themes”.

Остались вопросы? Напиши комментарий! Удачи!

Больше результатов…

<index>

Из этого большого количества плагинов мега-меню есть тот, который подходит для большинства пользователей. Это плагин WP Mega Menu. Он предлагает все основные функции и функциональные возможности, и он бесплатный.

В статье мы рассмотрим основной функционал плагина WP Mega Menu, как его установить и настроить.

Функции WP Mega Menu

Широкий диапазон функций WP Mega Menu включает в себя:

• Перетаскивание меню.
• Визуальное построение меню.
• Виджеты в пунктах меню.
• Вариант нескольких тем.
• Экспортировать / импортировать темы меню.
• Брендинг с логотипом и социальными иконками.
• Маркировка меню / значки.
• Поддержка значков.
• Растянутое меню и картинка в фоне меню.
• Адаптивное и мобильное меню.
• Неограниченные цвета и варианты Google шрифтов.

Рассмотрим некоторые из мощных функций более подробно.

Функциональность построения меню перетаскивания

После того, как на вашем сайте установлен плагин WP Mega Menu, вы можете создать меню, используя функции перетаскивания. Добавьте строки, а затем перетащите виджеты в столбцы этих строк. Этот плагин WordPress автоматически сохраняет изменения при редактировании макетов меню. Вам не нужно писать код или что-то программировать. Мощная система перетаскивания WP Mega Menu дает возможность создавать лучшие меню с минимальными усилиями.

Полностью адаптивное и мобильное меню

Меню, созданные с помощью WP Mega Menu, будут на 100% адаптивными и мобильными. Независимо от размера устройств, на которых работает ваш сайт, у него не будет проблем с отображением. Вы можете управлять адаптацией к разрешению экрана, чтобы автоматически переключаться между настольными и мобильными версиями. Меню вашего веб-сайта будет отлично работать во всех ОС.

Интеграция с WooCommerce

Если у вас есть товары для показа и продажи на вашем сайте, WP Mega Menu дает вам фантастический способ прямого доступа посетителей к деталям продукта прямо из меню. У вас есть система для отображения продуктов eCommerce в элементах меню. Превратите свой сайт в сайт с высоко организованной навигацией eCommerce с помощью Mega Menu.

Многоуровневые выпадающие меню

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

Расширенные функции

Используйте в меню любой короткий код. Наряду с этим у вас есть возможность использовать два предустановленных расширенных виджета: добавление фотографий, заголовков и небольших деталей, которые будут отображаться во время зависания над ними.

Социальные иконки и опция поиска в меню

У вас есть система поиска по умолчанию WordPress прямо в вашем меню. С плагином WP Mega Menu вы можете сделать это всего за несколько кликов.

Размещайте ссылки на социальные сети со своими значками и стилями непосредственно в меню.

Полнота настроек

WP Mega Menu позволяет полностью настраивать меню. Настройка этого меню и внесение необходимых изменений довольно простая. Устанавливайте отступы и поля любого элемента в меню. Управляйте видимостью меню в соответствии с устройствами, на которых будут работать ваши меню. Вы также можете накладывать эффекты на элементы меню. Используйте разнообразные элементы, такие как значки, параметры фона при настройке меню.

Многоязычный: WPML-совместимый

Независимо от того, на каком языке ваш сайт будет работать, WP Mega Menu не будет иметь проблем ни с какими языками. Он полностью совместим с WPML. Делайте свой контент меню на любом языке, и меню будет работать.

Как построить мега-меню на вашем сайте WordPress

1. Установите плагин WP Mega Menu

Как и любой другой плагин WordPress, вы можете установить его на свой сайт двумя разными способами. Сначала перейдите в Личный кабинет -> Плагины -> Добавить новый. Укажите в строке поиска «WP Mega Menu» и нажмите «Установить сейчас». Затем активируйте плагин, когда появится кнопка «Активировать».

Вы также можете загрузить плагин WP Mega Menu из каталога WordPress. Затем откройте панель инструментов WordPress. Перейдите в Плагины -> Добавить новый -> Загрузить плагин. Загрузите ZIP-файл с плагином и нажмите «Установить сейчас».

Активируйте плагин после сообщения об успешной установки. Фактически, сама система попросит его активировать.

2. Создайте меню

Прежде всего, создайте меню, перейдя в панель инструментов WordPress -> Внешний вид -> Меню. Затем создайте новое меню. Так WordPress позволяет создавать меню по умолчанию.

3. Глобальные настройки WP Mega Menu

Найдите вкладку WP Mega Menu на левой боковой панели и нажмите на нее.

4. Создайте тему для меню

Темы меню определяют стили и поведение навигационных панелей в меню. Чтобы создать тему меню, откройте WP Mega Menu -> Темы. Вы можете либо создать новую тему, либо импортировать ее. Нажмите кнопку «Импорт темы» или «Создать новую тему», чтобы выполнить действие.

5. Настройки элементов Mega Menu

Посетите панель инструментов WordPress -> Внешний вид -> Меню. Параметр WP Mega Menu появится при наведении курсора мыши на элементы меню.

Кликните на него, чтобы сделать установки. Установите для параметра Mega Menu значение «Да» и нажмите «Добавить строку», чтобы выбрать строки и столбцы. Также выберите тему меню с левой стороны.

Магазин в мега-меню

Слева вы увидите полезные виджеты, с помощью которых можно добавить расширенные функции. Перетащите виджет WPMM Grid WooCommerce и поместите его в столбец.

Отредактируйте виджет WPMM Grid WooCommerce. Разместите свои товары с изображениями и информацией, как вы хотите, чтобы покупатели их видели. Вы можете указать название и выбрать определенную категорию или все категории для отображения товаров из всех категорий.

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

Смотрите также:

20 WordPress Social Media плагинов — чтобы поделиться контентом в социальных сетях10 популярных плагинов для безопасности WordPressДобавляем адаптивное мега-меню на WordPress для сайтов с большим количеством контента</index> —> —>

Насколько я понимаю, под термином мега меню в WordPress подразумевают сверхфункциональное огромный блок навигации по сайту со множеством разных элементов: списками, картинками, текстами, слайдерами и т.п. Наверняка вы такие встречали. Когда-нибудь опубликую полноценную подборку по теме, но сегодня речь пойдет о вполне конкретном решении — плагине Max Mega Menu. Выбрал его так как уже тестировал в работе для WooCommerce меню, он часто попадает в списки лучших модулей, плюс тут имеется одна из самых толковых и постоянно развивающихся бесплатных (Lite) версий. 

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

На данный момент минимальная требуемая версия системы — 3.8, работает до последней сейчас 4.8.3. Загрузок около 100 тысяч. Мне нравится, что за последние 2 месяца было исправлено почти 70 разных багов из 89, что свидетельствует о хорошей активности разработчиков.

Основные функции и фишки Max Mega Menu

• Поддерживаются несколько мест размещения, для каждого из которых сможете выбирать свои параметры;
• Простая работа с элементами навигации через Drag&Drop.
• Добавление иконок в пунктах меню.
• Есть удобный редактор тем оформления.
• Добавление любых виджетов: картинки, тексты, списки и др.
• Условие срабатывания: при наведении, клике.
• Эффекты вывода подменю: выезд, появление/затухание и т.п.
• Разные дополнительные опции по типу скрытия текста/ссылки или выключения на мобильной версии. Последний пункт поможет упростить создание отдельного обычного и мобильное меню в WordPress.
• Выравнивание для пунктов меню.

Чтобы понять насколько все это круто и удобно, советую просто глянуть следующее видео:

Кроме всего разработчики могут похвастаться очень правильными и корректным подходим к созданию своего решения. WordPress Max Mega Menu — действительно качественный продукт, вот вам парочка подтверждений:

• все оформление задается с помощью одного CSS файла, где вообще не используется «знаменитое» свойство important;
• поддержка Retina, адаптивность, срабатывание на смартфонах и планшетах (тестировали практически во всех существующих десктопных и мобильных браузерах);
• чистый код, JS скрипты при gzipped будут занимать менее 2Кб;
• поддержка разных фильтров/хуков;
• детальная документация + в отличии от многих других плагинов, форум поддержи достаточно живой.

Настройка и работа с Max Mega Menu

Сразу после установки в админке появится одноименный раздел. В «Основных настройках» вы сможете подправить несколько опций, касающихся поведения подменю, мобильных девайсов и т.п. Куда более интересными выглядят «Темы».

Здесь сразу 6 вкладок с разными фишками:

• Основные — выбирайте тип стрелок, тени, высоту строки и т.п.
• Меню бар — оформление основного блока: фоны, отступы, шрифты, наведение.
• Mega Menus — стили и настройки Mega Menu.
• Выпадающие — аналогичный остальным набор стилей.
• Mobile Menu — размер экрана для срабатывания и другие опции мобильного меню.
• Кастомное оформление — добавляйте свои CSS стили.

После того как основные параметры заданы, переходим в раздел WP админки «Внешний вид» — «Меню».

Вам нужно выбрать меню, с которым хотите работать, а затем в его настройках поставить галочку напротив «Включено». Активировать Max Mega Menu в WordPress получится только когда для меню заданна область отображения в шаблоне (шапка, футер, сайдбар и т.п.). Здесь же есть параметры эффектов и событий срабатывания.

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

Тут сможете, во-первых, определить количество столбцов, а также добавить любые виджеты. Кроме того, допускается изменение размеров каждого элемента. Выбирать виджеты разрешается только в первом (главном) уровне навигации. Если кликать по кнопке «Мега меню» напротив других элементов, то только для задания иконок и разных свойств:

Скрытие текста/линка, выравнивание и отключение на декстопе/мобильных — весьма полезный набор функций. Допускается задание подобных опций в каждом пункте меню. Не забывайте сохранять изменения.

Max Mega Menu Pro и Выводы

Вообще у данной разработки кроме репозитория есть еще отдельный сайт. Там собраны описания всех возможностей модуля, представлена документация и небольшая его демка, а также есть ссылка на тех.поддержку и загрузку. Стоимость продвинутой версии Max Mega Menu Pro, в принципе, не такая уж и высокая — для 1 / 5 / 99 сайтов она обойдется вам в $23 / $35 / $99 долларов соответственно. Сюда входит апдейт и поддержка в течении года. Если вы разработчик, то взяв Pro Business Licence и установив плагин на 5 сайтов, получите итоговую стоимость решения = 7 долларам!

Что же входит в Max Mega Menu Pro:

• Sticky фиксированное меню.
• Интеграция Google Fonts, наличие FontAwesome и пользовательских иконок в настройках.
• Поддержка вертикального и меню типа аккордеон.
• Общий логотип в навигации + блок поиска.
• Стили отдельных пунктов.
• Поддержка WooCommerce и EDD.
• Возможность настройки ролей пользователей.
• Поиск, иконки/лого и HTML для мобильных элементов.
• Автообновление и приоритетная поддержка.

Для рядовых классических сайтов вполне хватает обычной бесплатной версии Max Mega Menu в WordPress, которая по функциональности очень хороша. Разных настроек здесь очень много. Понравилось также, что разработчики поддерживают свое детище, относительно быстро исправляют текущий баги и заботятся о чистоте/корректности кода. На ознакомление придется потратить некоторое время, но оно того стоит. Чтобы проще было разобраться с работой плагина — смотрите видео и читайте документацию.

А какие модули Mega Menu в WordPress вы используете и почему? Работали с данным решением, что можете по нему добавить?

Заработай на сайте —>Используемые источники:

• https://info-effect.ru/gorizontalnoe-vypadayushhee-menyu-super-plagin.html
• https://hostenko.com/wpcafe/plugins/plagin-wp-mega-menu/
• http://wordpressinside.ru/plugins/max-mega-menu/