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

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как добавить на свой сайт мобильное меню. Вы сможете настроить меню, которое будет отображаться только на мобильных устройствах. Вы сможете указать максимальный размер экрана, при котором будет отображаться мобильное меню. Вы сможете сделать два меню, с левой и с правой стороны экрана, сможете указать для каждого меню отдельное меню сайта. Можно настроить внешний вид меню, цвета, размер, отступы и т.д.

Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Разберём настройки:

General Options .

– Enable Mobile Menu, можно включить или отключить мобильное меню.

– Enable Left Header Menu, включить или отключить левое меню.

– Enable Right Header Menu, включить или отключить правое меню.

– Width Trigger, укажите при каком максимальном размере будет отображаться мобильное меню.

– Hide Elements, скрыть какой-либо элемент с сайта при отображении мобильного меню. Можно указать CSS класс или ID элемента.

– Custom CSS, можно указать свои CSS стили для меню.

– Save Changes, сохраните изменения.

Header Options .

– Site Logo, можно выбрать что будет отображаться на мобильном сайте. Логотип или Текст.

– Logo, нажмите по полю, чтобы загрузить логотип.

– Alternative Logo URL, можно указать альтернативный URL-адрес логотипа.

– Header Height, можно указать высоту меню.

– Logo Top Margin, размер отступа, от верха сайта до логотипа.

– Header Text, можно указать текст, который будет отображаться в заголовке, если вы в начале выбрали отображение текста.

– Header Text Font Size, можно выбрать размер текста заголовка.

– Сохраните изменения .

Left Menu Options .

– Left Menu, выберите меню сайта для левого меню.

– Menu Icon, можно выбрать для меню иконку или изображение.

– Menu Icon Image, нажмите по полю, чтобы загрузить иконку или изображение.

– Left Menu Panel Width, можете указать размер ширины панели левого меню.

– Icon Top Margin, верхний отступ от иконки.

– Icon Left Margin, отступ с левой стороны до иконки.

– Сохраните изменения .

Right Menu Options . Здесь такие же настройки как и для левого меню. Здесь настройки для правого меню.

Color Options .

– Header Background Color, можно выбрать цвет для заголовка меню.

– Header Text Color, можно выбрать цвет для текста заголовка меню.

Выбор цвета для левого и правого меню (одинаковые настройки).

– Left Menu Icon Color, цвет иконки.

– Background Color, цвет фона меню.

– Text Color, цвет текста в меню.

– Background Hover Color, цвет фона при наведении.

Адаптировать свой сайт под мобильные устройства уже пытаются очень многие. Используют новые возможности CSS3 и на простых сайтах и на куда более сложных. В процессе возникают некоторые сложности, причем одной из важнейших является поведение меню сайта при просмотре на маленьких экранах. Решают данную проблему, как выяснилось, несколькими способами. Для меня же данная задача недавно стала особенно актуальной, поэтому я слежу за материалами в сети, касающимися адаптивного дизайна. И недавно я наткнулся на хороший анализ существующих паттернов адаптивной навигации.

Так как я имею отношение к опен-сорсному адаптивному HTML5-шаблону Simpliste, то решил все существующие возможности работы с навигацией испробовать на практике. Но кроме получения собственного опыта, мне удалось создать несколько наглядных примеров, доступных для использования любым желающим, а также подготовить описание процесса, с которым приглашаю вас ознакомиться.

Сама статья, заинтересовавшая меня и подтолкнувшая к действию, называется Responsive Navigation Patterns . На нее я и буду опираться, а в качестве примеров будут выступать страницы шаблона Simpliste с реализацией паттернов и полным описанием того, как добиться такого же результата.

Существует несколько подходов к адаптивной навигации. Рассмотрим их по порядку.

1. Навигация вверху или оставляем все как есть

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

Такой подход используется в темах оформления Simpliste.

Преимущества

Достигается проще всего. Не нужно использовать Javascript (и нет зависимости от него), не нужно невероятных маневров с CSS.

Недостатки

Проблема может начаться тогда, когда количество пунктов меню слишком велико. Во-первых, высота блока навигации может стать такой, что он полностью перекроет содержимое сайта на первой странице и пользователю придется «листать» сайт вниз, чтобы добраться до нужной ему информации. И так на каждой странице сайта. Во-вторых, возникает вопрос многоуровневых меню. Если их просто выстроить одно под другим, то возвращаемся к проблеме высоты блока навигации. В-третьих, если все заранее не предусмотреть, то добавление новых пунктов меню может вызвать неприятное «съезжание» и переносы.

2. Ссылка на футер, к навигации

Демо с полным описанием.

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

Достоинства

Остается единственная ссылка в шапке, которая занимает очень мало места. Нет зависимости от скриптов.

Недостатки

Придется дописывать дополнительный CSS код, чтобы либо перемещать меню из футера вверх на настольных компьютерах (с помощью position:absolute или position:fixed), либо прятать меню в шапке на мобильных устройствах, если оно дублирует меню футера. Кроме того, ощущение от резкого «прыжка» при перемещении по такой ссылке может застать пользователя врасплох.