Как следует делать мобильное меню

Автор:
Дата:
Плагин мобильного меню

В первую очередь хотим сказать, что данная статья не является строгим руководством. Мы делимся опытом, полученным за время практической разработки веб-сайтов.

С чего все начиналось

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

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

Спустя "энное" количество часов обсуждений и поисков, мы остановились на очень хорошием скрипте под названием jQuery mmenu (и еще mhead).

Документация jQuery.mmenu

Плагин очень гибок и имеет множество настроек, что позволит вам кастомизировать его под свои нужды. Подключается от очень просто. В head добавляем следующие строки:

<!-- Include jQuery.mmenu .css files -->
<link href="path/to/css/jquery.mmenu.all.css" rel="stylesheet" />

<!-- Include jQuery and the jQuery.mmenu .js files -->
<script src="path/to/js/jquery.js"></script>
<script src="path/to/js/jquery.mmenu.all.js"></script>

<!-- Fire the plugin onDocumentReady -->
<script>
  jQuery(document).ready(function( $ ) {
     $("#menu").mmenu();
  });
</script>

А в body формируем само меню, при чем вложенность у него может быть бесконечная:

<nav id="menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About us</a>
      <ul>
          <li><a href="/about/history">History</a></li>
          <li><a href="/about/team">The team</a></li>
          <li><a href="/about/address">Our address</a></li>
      </ul>
      </li>
      <li><a href="/contact">Contact</a></li>
   </ul>
</nav>

Однако все же это не туториал по установке плагина, вся информация имеется имеется на официальном сайте.

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

Расположение кнопки раскрытия меню

Обычно есть два варианта расположения - слева и справа. На самом деле еще встречаются такие сайты, где кнопку лепят прямо в середние мобильного хедера, но мы не рассматриваем случаи "я дизайнер, я так вижу". Если подойти к этому вопросу прагматично, может возникнуть несколько вопросов.

  • Если расположить кнопку слева, удобно ли тянуться к левому верхнему краю экрана?
  • А если телефон с большим дисплеем, все еще удобно?
  • Какую выбрать компоновку с логотипом или телефоном?

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

Примеры сайтов с кнопкой мобильного меню справа

Хедер на мобильных устройствах

Разумеется, разговор не ограничится одним лишь меню. Немаловажен и сам хедер, где располагается кнопка навигации. К сожалению, о нам зачастую забывают, что сказывается на удобстве. Почему? Представьте, что страница сайта достаточно длинная, вы пролистали ее далеко вниз, но хотите все же воспользоваться меню, чтобы перейти на другую страницу. В случае, если кнопка "подняться вверх", которая зачастую перекрывает какие-то важные элементы сайта, отсутствует, пользователь теряет драгоценное время, чтобы пролистать страницу обратно. Согласитесь, не очень приятно.
Так вот, чтобы этого избежать, есть три пути:

  1. Установить кнопку "пондяться вверх".
  2. Делать хедер фиксированным, закрепляя его вверху экрана.
  3. Установить специальный плагин, который показывает хедер только когда вы начинаете скроллить вверх.

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

Для этих целей имеется плагин под названием jQuery mhead от той же команды разработчиков. На сей раз приводить код вставки в проект мы не будем, он почти ничем не отличается от mmenu. Однако оставим ссылку на официальный сайт.

Документация jQuery.mhead

Вся ирония в том, что на сайте плагина меню находится слева :) Но не будем унывать. Мы советуем вам этот плагин, т.к. он очень гибко кастомизируется и протестирован на многих наших проектах. Будем надеяться, тенденция на удобство мобильных меню будет распространяться и дальше.