Как сделать мега меню на вордпресс

Обновлено: 07.07.2024

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

На WordPress’e можно сделать большое меню с помощью плагинов, которые организовывают из одних только визуальных настроек прям из админ-панели сайта. То есть не нужно будет лезть в исходный код, разве что в некоторых случаях.

Max Mega Menu

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

Некоторые особенности:

Большой набор иконок для добавления в пункты меню
Выравнивание пунктов меню по левому или правому краю в меню
Несколько эффектов появления меню
Многое другое

Mega Menu Plugin for WordPress – AP Mega Menu

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

Некоторые особенности:

300+ иконок шрифта Font Awesome, 160+ Genericon и 100+ Dashicons
Специальный виджет контактных данных
Визуальный конструктор внешнего вида
Выбор горизонтального или вертикального меню
Прочее

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

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

Max Mega Menu

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

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

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

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

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

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

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

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

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

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

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

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

Max Mega Menu Pro - это расширение для бесплатной версии Max Mega Menu . Расширение Pro устанавливается как отдельный плагин вместе с бесплатной версией Max Mega Menu. Любая работа по настройке меню, которую вы выполнили с помощью бесплатной версии Max Mega Menu, останется после установки расширения Pro (вам не нужно будет начинать заново!)

Установив Max Mega Menu Pro, вы получите доступ ко всем функциям бесплатной (базовой) версии Max Mega Menu, а также:

Липкое меню

Убедитесь, что ваше меню всегда на виду. Функциональность липкого меню фиксирует ваше меню (или меню) в верхней части страницы, когда пользователь прокручивает страницу вниз.

Мега-меню с вкладками

Мега-меню с вкладками идеально подходят для аккуратной организации структур меню с большим количеством контента.

Вертикальные меню

С Max Mega Menu Pro вы можете изменить ориентацию вашего меню с горизонтальной на вертикальную. Поддерживаются меню с левой и правой стороны.

Аккордеонное меню

Интеграция WooCommerce и Easy Digital Downloads

Отображение общего количества и количества корзины прямо в меню.

600+ дополнительных значков меню

Пользовательские значки

С помощью настраиваемых значков вы можете использовать значки пунктов меню прямо из медиатеки WordPress. Значки наведения и поддержка Retina включены по умолчанию.

Пользовательский стиль элемента

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

Логотипы меню

Выберите изображение из медиатеки, чтобы использовать его в качестве логотипа меню. Включена поддержка логотипа Retina.

Поисковая строка

Добавьте встроенное, расширяющееся или статическое поле поиска прямо в свое меню.

Роли и ограничения (разрешения пользователей)

Google шрифты

Пользовательские шрифты

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

Мобильные переключатели

Добавьте логотип, значки, поиск и пользовательские HTML / шорткоды на панель переключения мобильного устройства.

Значки пунктов меню

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

Приветствую вас, друзья!

Не так давно в комментариях к статье о выделении активного пункта меню с помощью JQuery один из посетителей попросил меня помочь разобраться с плагином меню для WordPress Jquery Vertical Accordion Menu, где подсветка текущего пункта меню не работала.

Я пообещал разобраться с этой проблемой, но, к сожалению, затянул с выполнением обещанного. Новогодние праздники, авралы на работе постоянно мешали мне заняться блогом. В итоге пришлось всту '

24 комментария к статье "WordPress плагины для меню: 6 лучших бесплатных решений"

Большое спасибо, добротная статья получилась)

На счет пункта меню в JQuery Accordion Menu Widget, на днях попробую, если не получиться отпишусь. Я в принципе так же делал, но не срабатывало, сейчас есть подозрение на саму тему. Будет по больше времени проверю 🙂

Рад, что мой труд был полезен 🙂 Спасибо за отзыв.

Спасибо за статью. Много полезного для себя узнал.

Статья понравилась. С JQuery Accordion Menu Widget у меня тоже проблемка. При клике на пункты меню, страница просто обновляется и все.

Хм… Про такой баг впервые слышу. При написании статьи устанавливал плагин на чистом WordPress, тестировал, никаких проблем не возникало. Скорее всего причиной может послужить неправильная структура меню либо неправильные ссылки, заданные в пунктах.

Промониторьте меню, которое отображается с помощью плагина (Админка -> Внешний вид -> Меню). Если ничего обнаружить не получится, тогда код в студию в виде скрина HTML кода меню, сгенерированного плагином, проинспектированным в инструментах разработчика браузера.

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

В итоге должно получится что-то вроде этого.

Спасибо за ответ! Я уже успел удалить JQuery Accordion Menu Widget и теперь пытаюсь настроить Max Mega Menu. Там с настройками более менее все понятно, единственное не нашел где изменить ширину рубрик. Сейчас ширина стоит на авто. Это я нашел в коде благодаря вашей статье о самостоятельном изменении интерфейса сайта. Но в настройках этого плагина нет ширины рубрик. Только ширина выпадающих вкладок. Я делаю вертикальное меню и как-то не очень смотрятся разнокалиберные кирпичики рубрик))

Если в настройках плагина такой опции нет, то попробуйте в css файле темы (в админке Внешний вид -> Редактор открывает этот файл по умолчанию) прописать для селектора пунктов меню:

Это, по идее, растянет элементы меню на всю ширину контейнера меню.Или пропишите этот код в уже существующем селекторе, если найдёте, конечно 🙂

Хотя, возможно, нужно внимательнее настройки Max Mega Menu, которых просто тьма, на самом деле.

Добрый день! Вопрос ваш (как и все) решаемый 🙂

Если возникнут ещё вопросы — пишите.

Здравствуйте!
Я переношу сайт на Вордпресс и возникла такая проблема: создание дополнительного меню в сайдбаре. Главное, что бы это меню выводилось не везде, а только для этой рубрики. У меня несколько рубрик, поэтому и доп. меню будет несколько.
Я только начал разбираться с Вордпресс. Если возможно, подскажите, какой плагин лучше подойдет для таких целей.
Заранее спасибо.
С уважением, Андрей.

Добрый вечер. Сам я на практике таким не занимался, но могу порекомендовать плагин Conditional Menus. По описанию, это то, что нужно в вашей ситуации.

Надеюсь, мой ответ был полезен 🙂

Почему в вордпрессе все такое поганое? Ни одного нет нормального.

А чем Вас Max Mega menu не устроил? Как по мне, достойный вариант среди бесплатных плагинов.

+1, как раз, то, что искал

Подскажите пожалуйста по меню навигации, в левом виджете будет перечисление болезней (35-40), мне нужно, чтобы при клике мышки на болезнь, выдвигалось несколько слов-ссылок (названия препаратов для лечения) каким плагином это осуществить ? Искал подходящее решение, но даже не знаю как правильно сформулировать запрос в гугле. Спасибо

Доброго времени суток 🙂 Вам необходимы плагины меню WordPress для вертикального выпадающего меню. Из представленных в статье плагинов 100% подойдёт JQuery Accordion Menu Widget. Посмотрите видео с демонстрацией его возможностей в статье — там как раз разбирается пример реализации такого меню. Вам останется только подкорректировать его стили под дизайн Вашего сайта.

Также рекомендую попробовать лидер рейтинга — Max Mega Menu, потому что его функционал действительно впечатляющий. Думаю, в сети можно будет найти примеры реализации Вашей задачи с его использованием, если предыдущий плагин чем-то не устроит.

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

Есть, конечно 🙂 Тот же JQuery Accordion Menu Widget при всей его архаичности позволяет это делать. Посмотрите видео в статье. На нём показан весь процесс настройки, чтобы получить нужный Вам результат.

Здравствуйте!
Приобрёл плагин Jet menu, после установки на сайт возникла внутренняя ошибка сервера 500

Здравствуйте. Какой подробный текст ошибки? Что пишется в логах? И, я думаю, в любом случае лучше обратиться к поставщику плагина — официальному производителю или диллеру, у которого Вы непосредственно купили плагин.

Хорошая статья, но сейчас стандарт мега меню это Groovy Menu

За ссылку спасибо, но говорить о том, что плагин с 200+ активных установок — стандарт — это смело 🙂

Добрый день. С интересом прочитал ваш обзор. Интересно было бы в деле посмотреть Max Mega Menu, о котором вы пишете. В заголовках плагина написано, что есть русская версия, но при инсталяции идет стандартная английская, или я не могу до нее добраться? Бьюсь несколько дней, начитался много чего, что-то поставил, но путем ничего не получилось, все прибил и вернулся к началу. Из моей писанины ясно, что я гуманитарий, но ручки шаловливые хотят большего. Изначально искал ответа на потребность создать в главном правом вертикальном меню два предмета с дочерними файлами, желательно, чтобы они открывались или выпадали при нажатии. Речь идет о двух книгах — в одной 29 глав, в другой 6 глав. Хотелось бы, чтобы родительское меню отражалось на всех страницах каждой книги. Следует иметь в виду, что и сейчас вертикальное меню большое, а засунуть еще список такой это ужас. Сайт личный — итоги творческой деятельности за много-много лет. Контент интересный, на мой взгляд. Делаю это не для большой аудитории. Продвижение мне не нужно и неинтересно. Извините за длинное письмо. Буду рад вашему ответу.

Здравствуйте. У Max Mega Menu интерфейс в админке на английском, но меню на сайте Вы можете создавать на любых языках.

Читайте также: