Горизонтальное выпадающее меню Супер плагин WordPress

Прибамбасы для сайта

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

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

 

горизонтальное выпадающее меню

 

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

 

Max Mega Menu

 

Далее, после установки и активации плагина, перейдите на страницу: 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.

 

Registered Menu Locations

 

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

 

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

 

info-effect.ru
Добавить комментарий для Ольга Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Ольга

    Добрый день!
    Как сделать меню на всю ширину основной части?

    Ответить
    1. Admin автор

      Здравствуйте. В настройках стилей меню укажите размер ширины меню такой же как и у основной части.

      Ответить
      1. Ольга

        Илья, подскажи, пожалуйста, где это нужно сделать? Где-то здесь?

        Ответить
        1. Admin автор

          В настройках: Menu Themes – Mega Menus – Panel Width, ширина окна выпадающего меню. И Flyout Menus – Menu Width, ширина меню. Можно и свои CSS стили добавить, как у вас на скриншоте показано. В общем ищите в настройках параметр – Width (ширина).

          Вам ещё может помочь плагин – SiteOrigin CSS.

          Ответить
          1. Ольга

            В Flyout получилось, спасибо!
            А вот основное меню никак не идет (

          2. Admin автор

            Сейчас смотрел настройки, там по умолчанию стоит ширина 100%. Всё нормально, меню не должно растягиваться в вашем случае, потому что ширина меню зависит от количества страниц, размера заголовков страниц, расстояние между вкладками и т.д. Попробуйте добавить страницы в меню и оно растянется до максимального размера. Мега меню автоматически подстраивается под размеры меню вашей темы.

          3. Admin автор

            А вы кэш CSS удаляете ?

  2. Ольга

    Пробовала удалять, не реагирует.
    А есть ли какое-то решение, чтобы сделать “резиновое меню”? То есть не зависимо от количества пунктов в нем, оно растягивалось на всю ширину?

    Ответить
    1. Admin автор

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

      Можно ещё попробовать отключить Вывод CSS в основных настройках, чтобы отображались стили меню по умолчанию.

      Ответить
  3. Любовь

    Привет Илья!
    Назрел момент, когда мое отображение меню на сайте меня уже не устраивает…
    ищу варианты.
    не знаю) но сейчас попробую этот плагин, потом напишу.

    Ответить
  4. Любовь

    этот плагин уже на рус языке, удобно

    Ответить
  5. Любовь

    Илья, у тебя самого какой стоит на сайте плагин меню?
    понравилось) выпадает вертикально.
    Спасибо!

    Ответить
    1. Admin автор

      Привет! У меня не плагин, я вручную делал, вот здесь смотри как – http://info-effect.ru/sdelat-vypadayushhee-menyu-na-sajt-wordpress-ochen-prosto.html

      Ответить
  6. Любовь

    Илья!
    Спасибо! Как ты оперативно по плагун инфу даешь)
    Живешь на сайте душой и работа?)
    Здорово, ок все смотрю…

    Ответить
  7. Любовь

    Глянула.. Ай нет!(
    Илья, но только мы уже знакомы кучу времени…)
    А сайтом я занимаюсь с 2009… т.е. не совсем пень… чайником и остаюсь, конечно… но
    Такое меню меня уже не устраивает.
    Мне нужен плагин для меню, персональные настройки меню.
    Спасибо
    Пробую этот для меню плагин Max Mega Menu
    Спасибо

    Ответить
  8. Любовь

    Опс)
    Какой крутой плагин меню Max Mega Menu.. настраиваю!
    Спасибо)
    Немного жаль, что на форуме недьзя представить скрин ..как здорово получается, меняеется внешне супер сайт
    Спасибо Илья!

    Ответить
    1. Admin автор

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

      Ответить
  9. Любовь

    Спасибо!
    Ага)
    уже все пробую…
    напишу позже
    спасибки!)

    Ответить
  10. Любовь

    Плагин не помогает реализовать мои задумки по настройкам меню… не могу пока справиться с настройками(

    Ответить
    1. Admin автор

      Какие задумки, что конкретно нужно сделать?

      Ответить
  11. Любовь

    Илья привет
    Все получилось!
    Сделала как ты и посоветовал)
    Спасибо огромное! Очень красиво получилось.
    ;) посмотри!
    Спасибо!!!

    Ответить
    1. Admin автор

      Привет. Хорошо получилось и для этого плагин не нужен!

      Ответить
  12. Марина

    Здравствуйте. а как настроить чтобы меню было вертикальное? хочу в сайдбар, но выводит не очень красиво.

    Ответить
    1. Admin автор

      Здравствуйте. Настраивайте для одного пункта меню и всё. Стили можно в настройках изменить.

      Ответить
  13. Андрей

    Добрый вечер!
    Огромное спасибо за интересные статьи, многое прочитанное оказалось просто необходимым для создания своего сайта.
    Буду благодарен за ответ о проблемке при установке Мега Меню – после установки верхнего главного меню в теме Twenty Seventeen исчезла кнопка (стрелка в правой верхней части сайта) для перемещения к контенту страницы.
    Как ее восстановить? Была очень полезной с учетом наличия в теме огромной картинки при открытии главной страницы.

    А такую же можно внизу сделать для перемещения в верхнюю часть страницы?

    Заранее благодарю.

    Ответить
    1. Admin автор

      Здравствуйте. Да, конечно, стрелку можно поставить с помощью плагина WPFront Scroll Top.

      Ответить
  14. Равиль

    Привет, возник глупый вопрос, но не могу на него найти ответ… В поле Active Menu Instances выставляю 1, чтобы шаблонное меню спрятать, оно пропадает, но после этого в мобильной версии пропадает Мега Меню. Подскажи, в чем косяк?

    Ответить
    1. Admin автор

      Привет. Зачем шаблонное меню прятать? Его же заменяет мега меню.

      Ответить
  15. Равиль

    В том то и дело, что под Мега меню появляются дополнительные дублирующие кнопки

    Ответить
    1. Admin автор

      Такого не должно быть. Значит в настройках что-то не так указали.

      Ответить
  16. Равиль

    вот и не понимаю, что именно не так указал

    Ответить
    1. Admin автор

      Ладно, я посмотрю настройки.

      Ответить
    2. Admin автор

      В меню вы включили Max Mega Menu? Должна стоять галочка напротив Enable. Попробуйте ещё изменить параметр Active Menu Instances.

      Ответить
  17. Равиль

    Включено, в Active Menu Instances выставлял 0, 1 и 2. В первом случае есть и основное, и мобильное, но остаются двойные кнопки, 1 – отключается мобильное меню, а при 2 – отключается основное, а в мобильном появляется удвоение.
    Вообще, не понимаю, откуда появляются двойные кнопки. На другом своем сайте поставил, там нормально все

    Ответить
  18. Андрей

    Привет! Плагин хороший, но возникла проблема – не могу решить.
    На мобильных устройствах Max Mega меню отображается в открытом виде и не сворачивается, т.е. переключатель Меню не работает. В одном из пунктов сделан выпадающий список для выбора категории товаров, поэтому между этим и следующим пунктом меню отображается большой промежуток. Сделано на Storefronte. Там есть Основное меню, дополнительное и мобильное. Нужно делать отдельное меню для мобильных или лучше настроить одно основное, при условии, что пункты меню нужны одинаковые?

    Ответить
    1. Admin автор

      Привет. Скорей всего дело в настройках плагина. Значит включена опция, чтобы меню было открыто по умолчанию. Точно посмотрел там всё? Меню нужно одно делать. В настройках можно настроить CSS стили и т.д. Более подробно и внимательно изучи настройки!

      Ответить
  19. Андрей

    Привет. Такой опции не оказалось. Но я нашёл причину) Был конфликт с другим плагином, делающим липкое меню. Пришлось от него отказаться, жаль( А в мегамах видимо такого нет? И ещё вопрос – как сделано в демо-версии сайта на мобильной версии допменю внизу?

    Ответить
    1. Admin автор

      Привет. В Storefront эта функция по умолчанию.

      Ответить
  20. Андрей

    Нашел, что липкое меню в платной версии

    Ответить
  21. Гена

    Добрый день! Плагин Max Mega Menu отличный, и Ваше объяснение – пожалуй, лучшее, спасибо! Но непонятно, как настроить, как у Вас на скриншоте (Златоуст-ВИП): что бы включался значок стрелки справа от активного пункта меню (Категории), а на остальных кнопках в этом время значки были бы скрыты?

    Ответить
    1. Admin автор

      Добрый день. А у вас сейчас как, значки все видны при наведении? По моему я ничего для этого не делал. Значки добавлял с помощью плагина Menu Icons by ThemeIsle.

      Ответить
  22. Гена

    У меня видны все значки одновременно. При выделении пункта меню – они никак не меняются. Спасибо за ответ, поломаю еще голову сам, посмотрю плагин Menu Icons by ThemeIsle. Если что-то придумаю – отпишусь!

    Ответить
  23. Михаил

    Добрый день! Не пойму как с помощью MegaMax сделать вертикальное меню в сайдбаре. Опишите нюансы пожалуйста

    Ответить
    1. Admin автор

      Добрый день. Точно также, как показано в инструкции. Создаёте меню, настраиваете его. Затем, на странице виджетов, выберите виджет Меню, в его настройках выберите название меню, которое вы создали и сохраните. Всё готово, всё очень просто здесь, вам нужно просто разобраться. Что конкретно вам не понятно?

      Ответить
  24. Dennis

    Добавьте инструкцию по Groovy Menu плагин уже стал стандартом дефакто

    Ответить
    1. Admin автор

      Хорошо, я посмотрю этот плагин, возможно сделаю обзор. Какой у вас вопрос по данному плагину?

      Ответить
  25. Максиим.

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

    Ответить
    1. Admin автор

      В настройках виджета меню, на вкладке Setting, есть параметр Sub Menu Align – расположение меню второго уровня. В настройках плагина General Setting – Tools, параметр Event – можно выбрать как будет открываться выпадающее меню. Проверяйте.

      Ответить
  26. Аноним

    Добрый день, спасибо за статью. Не очень понимаю как организовать категории товаров, так что бы вышло как у вас на первом скриншоте сайта “злотоуствип”. Пожскажите какие настройки нужно поменять в плагине, что бы вышло нечто похожее. Т.К. категорий первого порядка у меня очень много, я считаю подобную организацию наиболее выгодной с точки зрения удобства навигации.

    Ответить
  27. Николай

    Добрый день, спасибо за статью. подскажите, пожалуйста, как организовать меню категорий товаров, так же как у “златоуствип”

    Ответить
  28. Николай

    Добрый день, спасибо за статью. Подскажите как сделать меню категорий как у “Златоуст вип”?

    Ответить
    1. Admin автор

      В инструкции показано. На странице создания меню, в виджете страницы будет кнопка Mega Menu, там можно будет создать выпадающее меню.

      Ответить
      1. Николай

        Я создал и оно выпадет списком вниз.

        Ответить
        1. Admin автор

          В настройках укажите количество колонок

          Ответить