Max mega menu wordpress настройка: Настройка Max Mega Menu для WordPress и обзор всех его функций – Max Mega Menu — многофункциональный плагин меню WordPress

Бесплатное Мега Меню на вашем сайте

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

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

Max Mega Menu

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

Переходим в свой основной раздел — Меню. Если до этого вы еще не создали вообще ни одного меню, стоит сделать это прямо сейчас и сделать его активным в закладке — Управление областями. Слева появится закладка — Maga Menu Settings. Поставьте галочку в чекбоксе «Enable» и настройте:

  • Event — по какому событию открывать меню. По клику или наведению мыши.
  • Effect — визуальный эффект вывода.
  • Theme — по умолчанию одна тема (смотрите выше), но если вы создадите свою, то сможете её тут выбрать.

Остальные настройки сосредоточены справа в самих элементах меню навигации. Причем для разных элементов они могут отличатся в зависимости от вложенности. Выберите иконку если нужно, тип меню, в Configure Panel Widgets встроен мощный Drag & drop редактор который поможет вам вывести в меню любые виджеты.

К слову сказать — меню полностью адаптивное к мобильным устройствам и поддерживает Retina экраны. Взгляните на небольшой видео ролик, где кратко и понятно всё показано автором. Английский знать не надо 🙂

Скачать плагин

Mega Menu by WooRockets.com

Еще одна отличная возможность добавить на сайт суперское меню навигации с плагином — Mega Menu by WooRockets.com. Установка и активация плагина стандартные.

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

Переходим в раздел WR mega menu в вашей админке и кликаем на Add New. Попадаем на новую страницу для построения нового меню. Те кто раньше уже имел дело с Drag & drop композерами сразу почувствуют себя в родной стихии. Процесс строительства меню мало чем отличается от построения страницы.

В начале убедитесь, что наверху в меню — Location указано именно то меню, какое вам нужно. Или кликните на Menage Location для выбора меню.

Кликаем — Add Element и выбираем во всплывающем окне тип контента который нужно добавить в меню. Наверху слева можно выбрать один из стандартных предлагаемых вариантов или добавить виджеты WordPress.

При необходимости добавляем строки с разбиением на нужное количество столбцов. Слева располагаются закладки перетаскивания элементов меню вверх или вниз, а справа закладки, где можно включить редактирование или удаление. Не забываем справа нажимать привычную кнопку — Опубликовать или — Обновить для сохранения результатов своих трудов.

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

Очень функциональная штуковина, короче. Не зря у авторов кроме этого плагина есть еще: контактная форма и конечно — композер, который видимо и послужил основой для плагина мега меню. Посмотреть работающее демо во всей красе можно вот здесь.

Скачать плагин.

Великолепные и мощные плагины с помощью которых можно практически создать меню своей мечты. Единственный момент который может немного омрачить радость пользователей, это вопрос совместимости с разными темами. К сожалению, насколько я помню, у премиум плагинов это вопрос иногда возникал. Я тестировал оба плагина на стандартной теме и никаких проблем и багов не заметил. Чего и вам желаю, друзья!

Рекомендую почитать еще по теме:

WordPress меню навигации — Mega Main Menu
UberMenu — ставим ПРО навигацию на свой блог

Продвинутое меню WordPress с помощью плагина

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

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

Меню WordPress с помощью плагина Max Mega Menu

Из названия Max Mega Menu уже становится понятным, насколько много у него функций. Чтобы начать работать с этими дополнением, скачайте его, установите на свой сайт и активируйте. После этого в вашей консоли появится новый пункт «Mega Menu», в котором есть три подпункта с настройками. Все их мы рассматривать не станем, так как у плагина очень много опций. Остановимся только на самых основных.

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

Следующий подпункт «Menu Themes». Здесь определяется дизайн для меню. Можно создать новые собственные темы для меню в неограниченном количестве. Если вы будете разбираться с этим набором опций, то у вас уйдёт на это полдня или даже больше – настолько много здесь возможностей для кастомизации внешнего вида. Практически любая идея может быть реализована в этом меню WordPress. Единственный недостаток этой страницы настроек – это то, что тут всё по-английски.

Последний подпункт настроек – это «Tools». Здесь собраны инструменты для очистки CSS стилей плагина, данных, а также экспорта и импорта стилей. Последнее очень удобно, это позволяет создать один раз тему для меню и переносить её на другие сайт с таким же плагином.

Теперь можно перейти в пункт «Внешний вид» и подпункт «Меню», туда, где мы создаём все меню. Здесь среди элементов появится новая вкладка Max Mega Menu Settings. Для начала её надо включить, установив галочку на Enable. Можно настроить ряд опций и выбрать тему, которая будет применяться к текущему меню.

Кроме того, у каждого пункта созданного меню создаётся кнопка «Mega menu», при нажатии на неё можно настроить каждый из пунктов индивидуально. Присутствуют практически все необходимые настройки, в том числе и возможность установить иконку для каждого пункта. Правда, в бесплатной версии этого плагина можно установить иконку только из заданного набора, а загрузить свою нельзя.

Max Mega Menu (вертикальное меню)

Делаю я это следующим образом, position: absolute; left: 200px;

Для какого элемента?
Надо для ul подменю
#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 > li.mega-menu-flyout ul.mega-sub-menu

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

Все верно! а я для li делал, всю голову сломал, спасибо огромное)
Но есть 1а проблемка) если в теме меню, что то поменять или добавить, то Style.css перезаписывается ведь и обратно все меняется, как такого рода проблемы решают ?

если в теме меню, что то поменять или добавить, то Style.css перезаписывается ведь

Да? Это странно. Впрочем, я с Max Mega Menu не знаком. Может, он и перезаписывает.

как такого рода проблемы решают ?

Созданием собственного css, который дополняет и переопределяет правила из css плагинов и темы. Раньше использовали отдельные плагины, а начиная с WP4.7 поддержка кастомных стилей включена в движок (фронт-энд → админ-бар → настроить → дополнительные стили).

В Вашем случае по идее должно быть достаточно

ul.mega-sub-menu { left: 200px; }

В крайнем случае можно добавить !important.

Ну туда не помогло, потому что я же пишу в style.css самого плагина, а у него есть то же такая вкладка куда можно записывать кастомные стили, так что все заработало! спасибо большое за помощь!

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

Действительно ведь проваливается, а как эту проблему решить ? подскажите пожалуйста)

Я так понимаю надо, что бы при наведении на пункт меню верхнего уровня, выделялся не просто текст а вся строка, т.е. кнопка должны быть не размером с «название пункта», а во всю строку

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

Именно. Там у li стоит width:auto, а нужно width:100%

Max Mega Menu — StoreFront Integration — Плагин для WordPress

Автор: megamenu.com

Описание

Integrates Max Mega Menu with the WooCommerce StoreFront theme.

Requires Max Mega Menu and StoreFront.

This plugin will add a ‘StoreFront’ menu theme (designed for a dark StoreFront header background. If you are using a light header background color you will need to update the theme font colors under Mega Menu > Menu Themes).

This plugin will also remove residual styling from contents within mega sub menus.

IMPORTANT: When Max Mega Menu is enabled, the «Primary Menu» menu will be displayed on both desktop and mobiles. The «Handheld Menu» will not be used.

Скриншоты

  • Max Mega Menu working with StoreFront
  • This plugin adds a preconfigured "StoreFront" theme

Установка

  1. Go to the Plugins page in WordPress
  2. Search for «Max Mega Menu — StoreFront Integration»
  3. Click «Install»

After installation go to Appearance > Menus. In the Max Mega Menu Settings box (on the left) change the Theme setting to «StoreFront».

Участники и разработчики

«Max Mega Menu — StoreFront Integration» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

Журнал изменений

1.0.3
  • Fix: StoreFront 2.4.4+ compatibility. On mobile, the footer search icon doesn’t/didn’t work when Max Mega Menu is enabled.
1.0.2
  • Fix: StoreFront 2.2.6+ compatibility. On mobile, the footer search icon doesn’t/didn’t work when Max Mega Menu is enabled.
1.0
  • Add support for «Storefront WooCommerce Customizer». Make menu full width when «Cart Link» option has been unchecked (https://docs.woocommerce.com/document/storefront-woocommerce-customiser/)
  • Add support for «Storefront Powerpack». Make the menu full width when the header layout customizer has been used
  • Fix: Change «Navigation» to «Menu» to reflect update to the StoreFront theme
  • Fix: Positioning of menu when sticky
  • Fix: Clear mobile menu so that it sits below site branding instead of inline
0.1

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

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