Отправляет email-рассылки с помощью сервиса Sendsay

Делаем свой сайт

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 93 RSS
  Декабрь 2015   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://delaemsait.info
Открыта: 15-12-2015

Автор
Андрей Ложников

Статистика

93 подписчиков
0 за неделю
←   Все выпуски   →

Делаем свой сайт


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


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

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

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

menu2

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

  • CSS Menu ID or Class to use for SlickNav Mobile (CSS класс или ID существующего меню, которое будет преобразовываться в мобильное) — здесь надо указать класс или 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. (Позиция меню. По умолчанию, после тега body) — здесь можно указать тег, после которого будет выводиться мобильное меню, например, .main_menu_nav. По умолчанию это body.
В избранное