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

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

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

После установки плагина нужно сделать его настройки – “Настройки – SlickNav Menu”.

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

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

  • CSS Menu ID or Class to use for SlickNav Mobile (CSS класс или ID существующего menu, которое будет преобразовываться в мобильное) – здесь надо указать класс или id.Например, ваше меню выводится в виде списка
    <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;
       }
    ....
    }

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

    ul.main-menu {
        display: block;
    }

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

    .main-menu {
        display: block;
    }

    все заработало нормально.

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

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

* Нажимая на кнопку "Отправить" Вы соглашаетесь с политикой конфиденциальности.