Мобильное меню для сайта

Мобильное меню для сайта — в этой статье мы рассмотрим его назначение и возможности. Создание мобильного меню необходимо для адаптивных проектов. Оно прежде всего создаётся для удобного, корректного отображения всех элементов меню, выходящих за размеры экрана.

Так как создать мобильное меню?

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

Если ваше меню включает 2-3 пункта — то окей, избежать проблему возможно и необходимости в создании мобильного меню может и не быть. Но зачастую пунктов может быть множество, да ещё и со сложной структурой. Именно для таких случаев создание мобильного меню — крайне необходимо, иначе ни о какой адаптивности сайта речь идти не может. Меню однозначно будет выходить за пределы размера окна и обрезаться, либо растягивать страницу и создавать «проплешины» в шаблоне, которые выражены в появлении белых полос у краев страницы под меню.

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

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

Мобильное меню для WordPress

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

SlickNav Mobile Menu — пожалуй, лучший плагин для создания мобильного меню. Его заслуги — это простота и функциональность.

Для того, чтобы им воспользоваться следует произвести 4 простых действия:

перейти на страницу плагина (которую я указал выше);
установить плагин;
активировать;
настроить меню;

Если первые 3 действия не создадут сложностей — с последним я расскажу подробнее, так как сам испытал некоторые затруднения. Для начала следуют найти плагин, чтобы совершить настройку:

Переходим в меню WordPress в пункт «Настройки»;

Находим наш плагин и переходим непосредственно к его настройкам

Я помогу разобраться с каждым пунктом и правильно его осуществить:

CSS Menu ID or Class to use for SlickNav Mobile — в этом поле требуется указать ID или Class меню, которое необходимо преобразовать в мобильное. Если у вас в меню используется несколько тегов — можете указать любой, но лучше всего родительский.
Maximum Width to use SlickNav (600px Default) — необходимо указать максимальное значение ширины, при которой будет использоваться мобильное меню в пикселях.
Menu Background Color — цвет фона мобильного меню.
Menu Button Color — цвет кнопки мобильного меню.
Menu Button Color Expanded — цвет кнопки меню, при его раскрытии.
Menu Label Color — цвет логотипа в меню.
Menu Icon Color — цвет иконки переключателя меню.
Menu Label Shadow — включает или отключает тень у логотипа.
Menu Icon Shadow — включает или отключает тень у иконки переключателя меню.
Menu Link Color — цвет пункта меню.
Menu Link Hover Color — цвет пункта меню, при наведении.
Menu Link Hover Color, Containing SubMenus — цвет активного пункта меню и цвет меню второго уровня.
Menu Button Position — расположение кнопки меню.
Menu Font Size (16px Default) — размер шрифта меню.
Menu Label Size (16px Default) — размер логотипа в меню.
Menu Label Weight — толщина начертания логотипа.
Menu link font case — тип начертания пункта меню.
SubMenu Button Indicator — расположение кнопки-индикатора для меню второго уровня.
Menu Position (body by default, using body puts the Menu at the top.
However you can adjust this location by adding in a CSS class — положение меню.
Menu Label («MENU» by default, leave blank for no label and just the symbol) — логотип мобильного меню (по умолчанию «MENU»).
Allow Parent Links — разрешение родительских ссылок.
Show Child Links on Open — позволяет показывать или скрывать дочерние ссылки.
Show search field at bottom of Menu — позволяет показывать поле поиска по сайту под меню.
Search Icon Background Color — заливка формы поиска.
Sticky Menu to Head — позволяет указать включить ли мобильное меню (оставляйте галочку).
Logo — позволяет подгрузить своё лого в мобильном меню. Предпочтительный размер — 200px.
Logo Alt Text — альтернативный текст для лого.
Hide Main Header — предоставляет выбор скрывать ли основное меню, при открытии мобильного (оставляем галочку).
Speed of Menu open/close — скорость анимации открытия и закрытия меню.
Closed Symbol — позволяет задать произвольный символ для скрытия дочернего меню.
Opened Symbol — позволяет задать произвольный символ для открытия дочернего меню.

После несложной настройки меню, со всеми моими рекомендациями — создание мобильного меню пройдет без лишних проблем и потерянного времени. К тому же, данный плагин является абсолютно бесплатным — что позволит сократить расходы на специалистов.

Если настроек плагина для вас мало — можно воспользоваться привычным CSS. Кстати, я именно так и настраивал стиль меню и его отображение — мне так удобнее и понятнее. Так что проблем с этим возникнуть не должно — главное желание.

Если же у вас другая CMS — можно найти массу аналогов среди плагинов для любой системы управления сайтом. А вот если у вас статичный сайт — придётся помучится, а лучше нанять специалистов, если знаний в этой сфере недостаточно.

Для создания мобильного меню для статичного сайта, необходимо воспользоваться привычным HTML, стилями CSS для оформления и javascript (Jquery). Для адаптивности меню, необходимо использовать Media Queries, которые мы рассматривали в предыдущей статье.

Ещё одним вариантом остаётся — воспользоваться готовыми библиотеками, которых в интернете немало. Думаю, позже обязательно расскажу об одной из них.

На этом я с вами прощаюсь и желаю удачи в создании адптивного мобильного меню