Как создать адаптивное меню под мобильные устройства в WordPress
Опубликовано: 10.10.2017
Вы хотели бы создать меню, адаптированное под мобильные устройства? Трафик мобильных устройств уже давно превышает десктопный на многих ресурсах. Добавление мобильного адаптивного меню существенно упрощает навигацию для пользователей вашего сайта. В этой статье мы покажем вам как легко создать адаптивное меню под мобильные устройства в WordPress.
В статье мы покажем как реализовать задуманное с помощью плагина (для новичков, без кода), а также — с помощью кода для более продвинутых пользователей.
В конце материала вы научитесь создавать выезжающее мобильное меню, выпадающее, а также раскрывающееся меню под моб.устройства.
Адаптивная верстка #3 | Пример
Готовы? Начинаем.
Способ 1: Добавляем адаптивное меню в WordPress с помощью плагина
Этот способ достаточно простой и рекомендуется для новичков, т.к. не потребует добавления кода.
Здесь мы будем создавать меню-бутерброд, которое выезжает на мобильных разрешениях экрана.
Как сделать мобильную версию сайта wordpress
Первым делом вам потребуется установить и активировать плагин Responsive Menu .
После активации плагин добавит новый элемент меню под названием ‘Responsive Menu’ в админбар. Нажав на него, вы окажетесь на странице настроек плагина.
Для начала потребуется указать ширину экрана, при которой плагин начнет отображать адаптивное меню. Значение по-умолчанию установлено в 800px, и оно подойдет для большинства сайтов.
После этого нужно выбрать меню, которое нужно использовать для вашего адаптивного меню. Если же вы еще не создали меню, тогда сделать это можно на странице Внешний вид » Меню .
Последней опцией на экране будет указание CSS класса для вашего текущего НЕ адаптивного меню. Это позволит плагину скрывать ваше не адаптивное меню на маленьких экранах.