Мегаменю
Превратите любой пункт меню верхнего уровня в панель на всю ширину с числом колонок до 4 — сочетайте ссылки, заголовки, изображения, шорткоды и многое другое, не написав ни строчки кода.
Что такое мегаменю?
Стандартное выпадающее меню WordPress показывает один вертикальный список вложенных пунктов. Мегаменю открывает широкую панель, в которой могут быть несколько колонок, заголовки разделов, иконки и изображения. Такое решение часто встречается на крупных интернет-магазинах и насыщенных контентом порталах.
Включение мегаменю для пункта верхнего уровня
- Перейдите в Menu Builder → ⚡ Mega Menu в боковой панели админки.
- В списке пунктов для каждого пункта меню первого уровня отображаются значки состояния ON/OFF.
- Нажмите ＋ Включить мегаменю на том пункте, который хотите преобразовать.
- Нажмите ⚡ Редактировать столбцы ▶, чтобы открыть окно редактора колонок.
- Добавьте колонки, наполните их блоками содержимого, затем закройте окно и сохраните.
Мегаменю можно применять только к пунктам верхнего уровня. Вложенные пункты размещаются внутри колонок, а не в виде вложенных выпадающих меню. Для одного пункта поддерживается не более 4 колонок.
Добавление и упорядочивание колонок
В окне редактора колонок вы можете:
- Добавить колонку — нажмите ＋ Добавить колонку. Колонки располагаются горизонтально внутри панели.
- Дублировать колонку — нажмите значок дублирования в шапке любой колонки, чтобы создать её копию (со всеми пунктами) и вставить сразу после исходной. Недоступно при достижении максимума в 4 колонки.
- Изменить порядок колонок — перетащите маркер колонки влево или вправо.
- Задать ширину колонки — введите процентное значение. Оставьте поле пустым, чтобы распределить ширину поровну между всеми колонками.
- Задать выравнивание — выберите по левому краю, по центру или по правому краю для всех пунктов колонки.
- Удалить колонку — нажмите значок корзины в шапке колонки.
Типы содержимого колонок
Каждая колонка содержит один или несколько блоков содержимого. Нажмите ＋ Добавить элемент внутри колонки, чтобы выбрать тип:
| Тип | Описание | Основные поля |
|---|---|---|
| Ссылка | Кликабельная ссылка с необязательной иконкой и строкой описания. | Подпись, URL, класс иконки, описание, открывать в новой вкладке |
| Заголовок | Некликабельная подпись раздела для визуальной группировки ссылок. | Подпись, класс иконки |
| Разделитель | Тонкая горизонтальная линия для разделения групп пунктов. | — |
| Изображение | Блок с изображением на всю ширину, при желании обёрнутый в ссылку. Выберите изображение из Библиотеки медиафайлов WordPress или вставьте внешний URL. | Изображение, URL ссылки, ширина, высота, открывать в новой вкладке |
| Шорткод | Выводит любой шорткод внутри колонки — удобно для форм обратной связи, рассылок, сеток товаров или собственных виджетов. | Строка шорткода |
Оформление для отдельного пункта
У каждой панели мегаменю есть собственная независимая вкладка 🎨 Внешний вид внутри окна редактора. Изменения применяются только к панели этого пункта и переопределяют глобальные значения по умолчанию. Нажмите ↺ Сбросить до глобальных настроек по умолчанию, чтобы сбросить все переопределения для этого пункта.
| Параметр | Описание |
|---|---|
| Фон | Сплошной цвет, один из 12 пресетов градиента или собственный градиент, созданный с помощью визуального инструмента (компас направления + два выбора цвета). |
| Максимальная ширина панели (px) | Ограничивает ширину этой панели (400–2400 px) и центрирует её. Оставьте поле пустым для поведения на всю ширину. |
| Отступы сверху/снизу и слева/справа | Внутренние отступы панели. |
| Промежуток между колонками | Расстояние между колонками. |
| Радиус скругления | Скругление двух нижних углов панели. |
| Размер шрифта | Базовый размер шрифта для всего содержимого панели. |
| Цвет ссылки / заголовка / акцента / при наведении / описания / разделителя | Полное управление цветами для отдельной панели, независимо от основного раздела «Цвета». |
| Стиль разделителя | Сплошной, штриховой или пунктирный. |
| Скорость анимации открытия/закрытия | Длительность перехода панели (0–800 мс). Установите 0 для мгновенного появления. |
Пресеты
Вкладка ✨ Пресеты внутри панели оформления позволяет загрузить готовый макет колонок в один клик. Доступно 20 отраслевых шаблонов:
SaaS, электронная коммерция, агентство, ресторан, путешествия, здравоохранение, недвижимость, юридическая фирма, финансы, мода, отель, некоммерческие организации, мероприятия, автомобили, игры, фитнес, красота и здоровье, технологический стартап, портфолио и образование.
Пресеты заполняют как содержимое колонок, так и подходящую цветовую палитру — поэтому они выглядят аккуратно сразу, независимо от темы вашего основного меню.
Поведение на мобильных
На мобильных устройствах при нажатии на пункт мегаменю выдвигается отдельная полноэкранная панель с кнопкой ← «Назад» вверху — это придаёт интерфейсу ощущение нативного приложения. Цвета фона и шрифты отдельных пунктов на мобильных нейтрализуются, поэтому ссылки всегда отображаются в том же аккуратном стиле, что и остальное мобильное меню.
Поведение на мобильных можно задать для каждого пункта в панели мегаменю:
- Видно на мобильных — используется панель навигации с выдвижением, описанная выше.
- Скрыто на мобильных — панель мегаменю не отображается на маленьких экранах.
Глобальные настройки
Эти настройки находятся вверху панели ⚡ Mega Menu и применяются ко всему сайту:
| Настройка | Описание |
|---|---|
| На всю ширину | Флажок для отдельного пункта, который растягивает панель на всю ширину области просмотра. |
| Цвета ссылок / заголовков / акцентов по умолчанию | Цвета по умолчанию для содержимого панелей мегаменю на всём сайте. Переопределения в оформлении отдельного пункта имеют приоритет. |
Умная зона наведения встроена по умолчанию — панель мегаменю не закрывается, пока курсор движется по диагонали к её содержимому.