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

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

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

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

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

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

  1 2 3

  <ul id="main-menu"> или <ul class="main-menu">

  
  Для первого случая вам нужно указать #main-menu, для второго .main-menu. То есть обязательно нужно указать решетку или точку, иначе работать не будет.
• Maximum Width to use SlickNav (600px Default) (максимальная ширина, при которой используется мобильная версия меню) — плагин добавляет стили, где указаны инструкции до определенной ширины экрана прятать основное меню (в данном случае .main-menu) и показывать мобильное (.slicknav_menu).
  
  @media screen and (max-width: 600px) { .main-menu { display: none; } .slicknav_menu { display: block; } .... }

  1 2 3 4 5 6 7 8 9 10 11

  @media screen and (max-width: 600px) {     .main-menu {       display: none;    }         .slicknav_menu {       display: block;    } .... }

  
  Здесь я столкнулся со случаем, когда на мобильном устройстве не только отобразилось мобильное меню, но и основное не было спрятано. Как выяснилось (и это можно встретить во многих темах) в стилях моей темы была указана настройка отображения:
  
  ul.main-menu { display: block; }

  1 2 3

  ul.main-menu {     display: block; }

  
  и, как более детальная инструкция, она оказалась приоритетнее, чем настройка плагина. После ее изменения на (убрал ul)
  
  .main-menu { display: block; }

  1 2 3

  .main-menu {     display: block; }

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