Адаптивность и мобильные
Всё о мобильном меню: как оно открывается, как ведут себя подменю, как выглядит кнопка «Меню» и что показать в шапке и подвале мобильной панели. Ширина, с которой включается мобильный режим, задаётся в Общих настройках → Адаптивность.
Где найти: Внешний вид→WP eLDeR MegaMenu→Основная конфигурация→Адаптивность и мобильные
Настройки
Адаптивность и мобильные
Настройки адаптивности и мобильных устройств
Как открывается меню на мобильных устройствах (ниже адаптивной контрольной точки).
- Выезжающая панель (справа)
- Выезжающая панель (слева)
- На весь экран
- Раскрытие под кнопкой
Как выглядит меню ниже контрольной точки (по умолчанию 959px):
- Выезжающая панель справа / слева — панель шириной до 380px выезжает сбоку, страница затемняется;
- На весь экран — меню закрывает весь экран;
- Раскрытие под кнопкой — пункты раскрываются в потоке страницы под кнопкой «Меню», как в классических адаптивных темах.
В режимах панели и полноэкранном прокрутка страницы под меню блокируется, закрыть меню можно крестиком, клавишей Esc или касанием затемнённой области.
По умолчанию пункты меню верхнего уровня выводятся в одну колонку. Выберите «Две (2) колонки», чтобы от 480px до вашей контрольной точки (по умолчанию 960) — примерно размер планшета — они шли в две колонки. С подменю «Аккордеон» или «Отдельный экран» (а также в выезжающей и полноэкранной панели) верхний уровень всегда выводится в одну колонку. Это затронет только пункты меню верхнего уровня.
- Две (2) колонки
- Одна (1) колонка
Относится к диапазону «планшет» — от 480px до контрольной точки. На телефонах пункты всегда в одну колонку. Для аккордеона и отдельного экрана всегда используется одна колонка.
Инициализировать меню в свёрнутом состоянии на мобильных. Снимите галочку, если не хотите адаптивный переключатель, а хотите видеть все пункты верхнего уровня на мобильных.
Если снять — на мобильных сразу видны все пункты верхнего уровня без кнопки «Меню». Подходит для коротких меню из 3–4 пунктов.
Подгонка этого значения под высоту вашего адаптивного меню может сделать переход плавнее. По умолчанию 500
Снимите галочку, если вам вообще не нужно адаптивное меню. Почти никогда не используется, кроме случаев, когда сайт совсем не адаптивный.
Анимированный «бургер» превращается в крестик, когда меню открыто.
- Анимированный «бургер»
- Иконка Font Awesome
«Бургер» — три линии, которые при открытии анимированно превращаются в крестик. «Иконка Font Awesome» — статичная иконка из набора.
Адаптивный переключатель
Адаптивный переключатель — кнопка, которая открывает и закрывает меню на экранах уже мобильной точки перехода
Автоматически отображать адаптивный переключатель для этого меню. Снимите галочку, если хотите предоставить свой переключатель, если меню развёрнуто по умолчанию, или если хотите скрыть меню ниже контрольной точки.
Снимите, если кнопка открытия меню у вас своя — например, в шапке темы. Свою кнопку можно вывести шорткодом [eldermenu_toggle].
Для стиля «Иконка Font Awesome»: показывать ли крестик, когда меню открыто. Только для шрифтовых иконок.
- Три полоски (крестик не показывается)
- Крестик, пока меню открыто
По умолчанию — кнопка (button).
Текст для отображения на адаптивном переключателе. Можно использовать {{menu_title}} для вывода заголовка переключаемого меню.
Можно оставить пустым — тогда на кнопке будет только иконка (не забудьте ARIA-метку ниже). Поддерживаются шорткоды.
ARIA-метка для кнопки адаптивного переключателя. Если оставить содержимое переключателя пустым, это следует задать для доступности. Можно использовать {{menu_title}} для вывода заголовка переключаемого меню.
Выравнивание содержимого внутри переключателя
- Слева
- По центру
- Справа
Выравнивание кнопки переключателя
- На всю ширину
- Слева
- Справа
Выберите, куда вставить адаптивный переключатель (если включён выше). Вариант «Фиксированный» может быть полезен в паре с модальным адаптивным меню, если ваша тема по умолчанию скрывает меню и переключатель на мобильных.
- В потоке (Inline)
- Фиксированный
Фиксированный — кнопка висит в углу экрана поверх страницы. Выручает, когда тема прячет своё меню на мобильных вместе с областью, куда выведено мегаменю.
Адаптивные подменю
Определите, как должны вести себя мобильные подменю.
- Выпадающее
- Аккордеон
- Отдельный экран
- Аккордеон — подменю раскрывается под пунктом, остальные пункты сдвигаются вниз;
- Отдельный экран — подменю открывается на весь экран с кнопкой «Назад»; лучший выбор для глубоких меню;
- Выпадающее — подменю появляется поверх пунктов, как на компьютере.
Выберите, может ли быть открыто более одного подменю одновременно при подменю-аккордеонах
- Несколько
- Одно
Одно — при открытии нового подменю предыдущее сворачивается; меню остаётся коротким.
Отступать внутренние выпадающие списки внутри аккордеона на это значение (первый уровень подменю останется выровненным с пунктами верхнего уровня). 20px хорошо подходит, если вы оставили отступы меню по умолчанию. Оставьте пустым для отсутствия отступа.
Показывать кнопку «Закрыть» вверху подменю на мобильных устройствах.
Ретрактор — кнопка «Закрыть» внутри подменю на мобильных. Полезна для подменю типа «Выпадающее», где закрыть подменю иначе неудобно.
Показывать кнопку «Закрыть» внизу подменю на мобильных устройствах.
По умолчанию ретрактор отображает «Close» и переводится. Вы можете переопределить его здесь, но тогда он больше не будет переводиться.
Настройки мобильной панели
Эти настройки действуют для выезжающей панели и полноэкранного мобильного меню.
HTML или шорткоды, которые заменят заголовок «Меню» в шапке панели.
Например логотип: <img src="/wp-content/uploads/logo.svg" alt="" width="120">. Крестик закрытия выводится всегда.
Цвет фона выезжающей или полноэкранной панели. По умолчанию используется фон скина.
Все режимы на одном экране
Комбинации «Отображение мобильного меню» и «Тип мобильного подменю», снятые на витрине (телефон 390px):
Любой мышью ниже контрольной точки меню управляется так же, как пальцем: наведение ничего не открывает, щелчок раскрывает подменю, второй щелчок по открытому пункту переходит по его ссылке.