Мобильные меню
Выберите один из четырёх самостоятельных стилей мобильного меню и точно настройте поведение навигации на маленьких экранах — и всё это без правки CSS или JavaScript.
Настройка точки перехода
Точка перехода (breakpoint) — это ширина области просмотра, ниже которой десктопное меню скрывается и появляется мобильное. Задайте её в разделе Menu Builder → Mobile.
Значение по умолчанию — 768 px (стандартная граница планшет/мобильный). Укажите любое значение в пикселях, подходящее вашему макету, или выберите Auto, чтобы плагин динамически определял доступное пространство.
Стили мобильного меню
1. Выпадающее меню По умолчанию
Самый распространённый стиль. Пункты меню выстраиваются вертикально в классической выпадающей панели прямо под панелью навигации. Подпункты идут с отступом под своим родителем.
- Привычный и понятный всем
- Хорошо подходит для меню с большим числом пунктов
- Лучше всего для: блогов, корпоративных сайтов, портфолио
2. Полноэкранное
Пункты меню центрируются на полноэкранном оверлее, закрывающем всю область просмотра. Крупная типографика, много свободного пространства.
- Эффектный и современный вид
- Лучше всего для сайтов максимум с 5–8 пунктами верхнего уровня
- Лучше всего для: агентств, фотографов, лендингов
3. Выдвижное меню — слева
Панель выезжает с левого края экрана, частично перекрывая содержимое страницы. Остальная часть страницы затемняется, но остаётся частично видимой.
- Привычно по мобильным приложениям (например, Gmail, Google Maps)
- Хорошо для глубоких иерархий навигации
- Лучше всего для: интернет-магазинов, порталов, сайтов с документацией
4. Выдвижное меню — справа
То же, что и левое выдвижное меню, но выезжает с правого края. Удобно, когда кнопка-бургер расположена в правой части панели, а панель слева выглядела бы нелогично.
Переключайтесь между стилями в разделе Menu Builder → Mobile. Изменение вступает в силу сразу — переопубликовывать меню не нужно.
Кнопка-бургер
Кнопка-бургер (☰) — это переключатель, который открывает и закрывает мобильное меню. Настройте её в разделе Menu Builder → Mobile:
| Параметр | Описание |
|---|---|
| Стиль иконки | Classic (3 линии), Modern (скруглённый) или Minimal (тонкий). |
| Выравнивание | Слева, по центру или справа в мобильной панели навигации. |
| Цвет иконки | Независимо от цвета пунктов меню. |
| Фон кнопки | Необязательный цвет фона за иконкой бургера. Плагин принудительно задаёт прозрачное значение по умолчанию, чтобы стили кнопок вашей темы не проступали. |
Цвета ссылок на мобильных
Ссылкам внутри мобильного меню можно задать собственные цвета, полностью независимые от десктопного меню. Три отдельных выбора цвета находятся в разделе Style → Hamburger → Mobile link text:
- Normal — цвет ссылки по умолчанию внутри мобильного меню
- Hover — цвет при касании или наведении на ссылку
- Active — цвет для текущего активного пункта
Оставьте любое поле пустым, чтобы унаследовать цвета десктопного меню.
Поведение подменю на мобильных
Когда у пункта меню есть подпункты, вы можете управлять тем, как они разворачиваются на мобильных, с помощью параметра аккордеон:
- Аккордеон включён — одновременно может быть открыто только одно подменю. При открытии одного остальные автоматически закрываются. Рекомендуется для длинных меню.
- Аккордеон выключен (по умолчанию) — несколько подменю могут оставаться развёрнутыми одновременно.
Задайте это в разделе Menu Builder → Mobile.
Мегаменю на мобильных
Когда у пункта верхнего уровня включено мегаменю, нажатие на него на мобильном выдвигает отдельную полноэкранную панель с одними этими ссылками — со стрелкой ← назад вверху. Это придаёт навигации ощущение нативного приложения (как на крупных розничных сайтах), сохраняя список чистым и читаемым.
Поведением мегаменю на мобильных можно управлять отдельно для каждого пункта на панели ⚡ Mega Menu:
- Видно на мобильных (push-режим) — стандартная push-навигация, описанная выше.
- Скрыто на мобильных — панель мегаменю не выводится на маленьких экранах; подпункты полностью скрыты.
На мобильных персональные переопределения оформления мегаменю (фон, цвета, шрифты) автоматически нейтрализуются, поэтому ссылки всегда отображаются в том же нейтральном стиле, что и остальное мобильное меню, — это исключает неудачные цветовые сочетания из десктопных пресетов.
Живой предпросмотр на телефоне
Пока вы находитесь на вкладке Mobile панели администрирования, закреплённый макет телефона в правой части экрана обновляется в реальном времени при изменении любой мобильной настройки — стиля открытия, цвета оверлея, выравнивания бургера, цвета ссылок, ширины выдвижного меню и многого другого. Сохранять ничего не нужно, чтобы увидеть результат.
Плагин автоматически учитывает медиазапрос CSS prefers-reduced-motion. Если посетитель включил «Уменьшение движения» в настройках доступности своей ОС, все анимации отключаются независимо от настройки выше.