Ноя

Max Mega Menu — функциональный плагин мега меню для WordPress сайтов

Насколько я понимаю, под термином мега меню в 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 вы используете и почему? Работали с данным решением, что можете по нему добавить?

Оцените статью:

(голосов - 3, средний балл: 5,00 из 7)

Загрузка...

Категории: Плагины;

Теги: вордпресс веб-разработка, дизайн, меню и навигация, настройки плагина, обзоры плагинов, оформление блога, полезные плагины.

комментариев 47 к статье “Max Mega Menu — функциональный плагин мега меню для WordPress сайтов”

1 2 Далее →

Nikita 09.11.2017
Вот это я понимаю меню для сайта!… обязательно установлю себе в блоге.
СергеевМ 13.11.2017
Я думал все подобные мега меню платные, спасибо за наводку на Max Mega Menu — судя по описанию, отличная штука.
Milligan 15.11.2017
Юзаю эту менюшку регулярно — отличный плагин!
Андрей 22.12.2017
Добрый вечер!
Огромное спасибо за интересные статьи, многое прочитанное оказалось просто необходимым для создания своего сайта.
Буду благодарен за ответ о проблемке при установке Мега Меню — после установки верхнего главного меню в теме Twenty Seventeen исчезла кнопка (стрелка в правой верхней части сайта) для перемещения к контенту страницы.
Как ее восстановить? Была очень полезной с учетом наличия в теме огромной картинки при открытии главной страницы.

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

Заранее благодарю.
Tod 22.12.2017
Андрей, данный плагин на Twenty Seventeen не ставил, возможно, там действительно какой-то конфликт возникает. Дабы проверить, что проблема в теме, можете временно заменить ее на другую и посмотреть. В любом случае вы всегда сможете вручную заново сделать кнопку вверх в WordPress через модули (из них я чаще всего использовал Scroll Back To Top).
Андрей 18.01.2018
Спасибо. Возможно воспользуюсь подсказанным «скрулом»
Tod, а кнопку «вниз» из верхней части главной страницы на середину контента как лучше сделать?
Tod 18.01.2018
Андрей, если честно, никогда не сталкивался с кнопкой «вниз». Если хотите делать это «вручную» для разных записей по разному, то подойдет функциональность html якоря в WordPress. Если нужно автоматизировать процесс, то следует поискать скрипт или плагин.
Андрей 18.01.2018
Огромное спасибо!
В принципе, мне нужна «стрелочка вниз» только на главной странице в области главного меню справа. Которая отправляла бы посетителя ниже — к началу контента страницы, меню прилепает к макушки экрана, стрелка при этом исчезала. В моей теме, сразу при входе на сайт, отображается тематическая картинка на весь экран и ниже главное меню.. эта стрелка вниз была очень к стати. Че нить придумаю
Amfus 16.04.2018
Добрый день! В блоге у себя поставил, хорошее меню, очень нравится и довольно гибкое. Но интересует одно, можно ли сделать его липким? Чтобы при прокрутке странице ниже уровня меню оно само прилипало и была всегда в зоне видимости пользователя?
Tod 16.04.2018
Amfus, данная опция входит только в Pro версию. Можно попробовать самостоятельно реализовать фиксированное меню через стили CSS.
иван 09.05.2018
подскажите пожалуйста — установил этот плагин, да, меню можно классное сделать, но вот в мобильной версии выглядит просто катастрофически ужасно, наложения, смещение картинок, главная страница — описания сдвинуты, слово на середине переносится на следующий абзац и пр.. как сделать так, чтобы отключить это мега меню для мобильной версии???
спасибо
Tod 10.05.2018
Иван, в пункте настроек «Темы меню» ищите вкладку «Molibe меню», где можно подправить некоторые варианты, в частности задать с какого именно размера экрана включается мобильный вариант. Если это не поможет, в CSS добавляйте display: none; для стиля, отвечающего за меню в экранах меньше 768px и т.п.
unda 01.06.2018
Добрый день! Столкнулся с такой проблемой: подменю скрыто и открывается при нажатии, а хотелось бы чтобы было изначально подменю было открыто, а только после щелчка скрывалось и открывалось. Попробовав сам изменить через css он конечно выполняет эти действия, но с большой нагрузкой. Может кто делал уже такое ? Есть ли спасение или переходить на другой плагин?
Tod 01.06.2018
unda, я бы поискал в настройках эту опцию, но мне кажется в 99% подобных меню подпункты изначально скрыты. А почему вариант через CSS работает медленно? возможно там указан для «раворачивания» подпунктов меню какой-то эффект и следует попробовать его убрать. К сожалению, с задачей не сталкивался, поэтому конкретного ничего не посоветую.
Владимир 11.06.2018
Подскажите пожалуйста ! в меню появляется текст? что делать
Tod 12.06.2018
Владимир, если честно, не совсем понятно о чем идет речь, но на последнем скриншоте в статье есть настройка, позволяющая скрывать текст — посмотрите, возможно, это то, что вам как раз и нужно.
Алексаднр 25.08.2018
Здравствуйте, пытаюсь поменять шрифт, цвет фона, цвет букав в выпадающем меню и ничего не происходит. Подскажите пожалуйста что делать?
Tod 26.08.2018
Алексаднр, во-первых, надо удостоверится, что вы точно меняете там, где нужно — в настройках модуля есть несколько страниц с цветом/шрифтами — нужно еще разок все проверить. Второй вариент — редактировать файл style.css или любой другой, где в теме хранятся стили оформления — нужно переопередлить классы для пунктов меню, возможно, придется использовать значение свойства !important. Детальнее пояснить, к сожалению, не смогу — у всех шаблонов свои особенности.
Antey 16.10.2018
Подскажите, как убрать белую полоску??? На скрине выделена красным. И как сделать, чтоб пункт меню выделялся на всю ширину меню, а не только на ширину названия пункта.
вот о чем говорю.
Tod 16.10.2018
Antey, это все в стилях задается — посмотрите в настройках Мега меню, возможно, есть какие-то границы, подчеркивания, рамки.
Второй вариант — кликаете по элементу правой кнопкой мышки и смотрите инспектор (Inspect в Хроме, например) — там можно понять в каком именно стиле задается то или иное оформление. После этого в файле style.css (или похожем) переопределяете данные свойсва блоков. К сожалению, конкретный код подсказать не смогу.
Нуржан 28.10.2018
Здравствуйте, пожалуйста подскажите как работать плагином. Я подключил его, активировал, вроде все норм, в самом настройке плагина все работает, но когда хочу изменить его в настройках(Например добавить 4 колоны и перетаскать туда меню, и.т.д ) ничего не меняется. Спасибо заранее)
Tod 30.10.2018
Нуржан, сложно сказать наверняка в чем там проблема. По тексту вопроса появилось несколько предположений: если внесли изменения, а на сайте ничего не поменялось, то тут либо забыли сохранить, либо не обновился кэш браузера; второй момент — надо посмотреть позволяет ли бесплатная версия модуля делать 4 колонки в меню? (вполне вероятно наличие такого органичения). Ну, либо постепенно внедрять опции — сначала вывели простенькое меню, потом добавили еще блоков и т.п. — так можно узнать на каком именно этапе начинаются глюки.
Наталья 31.10.2018
Добрый день! Вопрос не по теме, но очень надеюсь на помощь! Помогите, пожалуйста, с шаблоном Storefront. Поставила в хедер изображение, как рекомендовано, 1950х500, но оно размещается увеличенным и обрезанным. При этом при размещении во вкладке «Обрезать» все корректно отображается. Не могу понять в чем ошибка и как исправить, готова уже шаблон менять :(
Заранее спасибо!
Tod 31.10.2018
Наталья, изображение подстраивается под разные размеры экрана — это нормально, на планшетах и сматфонах оно будет обрезаться/уменьшаться еще больше. Если не устраивает сам принцип изменения картинки я бы: 1) поискал в настройках макета какие-то опции по этому поводу; 2) посмотрел бы CSS стили, которые управляют отображением хедера и, возможно, подправил бы что-то там. К сожалению, все макеты индивидуальны, дать какую-то точную рекомендацию не смогу.
Николай 08.12.2018
Добрый день, такой вопрос, есть одностраничный сайт, установил Max Mega Menu и прикрепил его чтобы оно постоянно было в поле зрения, как сделать чтобы при переходе по якорям меню закрывалось автоматически, а то не удобно закрывать его вручную. Заранее благодарен)
Tod 08.12.2018
Николай, судя по описанию модуля, закрепление меню есть только в Pro версии или вы делали его вручную через CSS? Чтобы добавить в него нужную логику работы без Javascript не обойтись (если этой фишки нет в настройках)… к сожеланию, конкретный код подсказать вам не смогу.
DenPul 09.12.2018
Здравствуйте. Такая проблема. В мобильном меню при нажатии на стрелочку(открытие подменю) ничего не происходит, точнее идёт переход на родительскую страницу. Также не открывается строка поиска. Помогите
Tod 10.12.2018
DenPul, так сходу сложно понять в чем проблема, возможно, конфликтует с установленным шаблоном/модулями, попробуйте без них потестировать меню.
Алексей 29.01.2019
Здравствуйте. Данный плагин преобразует только горизонтальное меню или может и вертикальное? Для вертикального никакой реакции
Tod 29.01.2019
Алексей, судя по описанию на официальном сайте поддержка «Vertical & Accordion Menus» есть только в Pro версии.