Ноя
6
28

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

Плагин Max Mega MenuНасколько я понимаю, под термином мега меню в 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

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

Визуальные настройки Max Mega Menu

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

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

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

Активация Max Mega Menu

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

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

Создание меню с плагином Max Mega Menu

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

Дополнительные настройки меню в плагине Max Mega Menu

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 1, средний балл: 7,00 из 7)
Загрузка...

категория Категории: Плагины;
теги Теги: , , , , , , .

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

  • 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, так сходу сложно понять в чем проблема, возможно, конфликтует с установленным шаблоном/модулями, попробуйте без них потестировать меню.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости