Как сделать меню для мобильных устройств

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

Но что делать, если ваша тема не поддерживает меню для мобильных пользователей? В WordPress для этих целей есть хороший плагин SlickNav Mobile Menu. Плагин интегрирует в шаблон известный скрипт для создания мобильного меню Slicknav. В числе достоинств плагина надо отметить поддержку многоуровневых меню.

После установки плагина нужно сделать его настройки — «Настройки — SlickNav Menu».

мобильное меню wordpress

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

  • CSS Menu ID or Class to use for SlickNav Mobile (CSS класс или ID существующего menu, которое будет преобразовываться в мобильное) — здесь надо указать класс или id.Например, ваше меню выводится в виде списка

    Для первого случая вам нужно указать #main-menu, для второго .main-menu. То есть обязательно нужно указать решетку или точку, иначе работать не будет.
  • Maximum Width to use SlickNav (600px Default) (максимальная ширина, при которой используется мобильная версия меню) — плагин добавляет стили, где указаны инструкции до определенной ширины экрана прятать основное меню (в данном случае .main-menu) и показывать мобильное (.slicknav_menu).

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

    и, как более детальная инструкция, она оказалась приоритетнее, чем настройка плагина. После ее изменения на (убрал ul)

    все заработало нормально.
  • Menu Position (body by default, using body puts the Menu at the top. (Позиция menu. По умолчанию, после тега body) — здесь можно указать тег, после которого будет выводиться мобильное меню, например, .main_menu_nav. По умолчанию это body.

Добавьте комментарий