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

Адаптивное меню для сайта + плагин для WordPress. Drogin.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройка мобильного меню с плагином для WordPress. Drogin.ru

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

Настройка мобильного меню с плагином для WordPress. Drogin.ru

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

  • 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, которые мы рассматривали в предыдущей статье.

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

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

 

 


0
Подписаться на новости

Отправить ответ

Оставьте первый комментарий!

Уведомить о
wpDiscuz