Содержание
Введение
Адаптивность — сильнейший тренд современного веб-дизайна. На рынке представлены устройства с экранами самых разных размеров: настольные компьютеры, ноутбуки, планшеты, телефоны. Лучшим решением, позволяющим адаптировать сайт под экраны разного разрешения, служит адаптивный дизайн. Маленькие экраны мобильных устройств бросают вызов десктопным сайтам. Для адаптации такого сайта под мобильные устройства нужно скрыть часть контента, изменить размер изображений, а некоторые элементы убрать вовсе. В этой статье мы рассмотрим несколько способов, как адаптировать под маленькие экраны важнейшую составляющую любого интерфейса — меню навигации.
Существует несколько решений проблемы: стандартный выпадающий список, раскрывающееся меню со стилями CSS, навигация, выезжающая со сдвигом контента, блоки, якорная ссылка на навигацию в футере и навигация в боковой панели. Каждое решение имеет свои достоинства и недостатки. Эта статья поможет вам выбрать лучший вариант, исходя из собственных потребностей, существующей разметки сайта и временных рамок.
Сжатие
|
Самое простое решение — уменьшить все элементы сайта в масштабе.
|
|
Поиграйте с CSS: убедитесь, что меню навигации хорошо выглядит на маленьком экране. Подход хорошо работает для меню с небольшим числом пунктов. Если их больше четырёх — лучше воспользоваться другим способом, иначе как минимум часть пользователей посчитает подписи трудночитаемыми, а ссылки — неудобными для нажатия пальцами.
Примеры
Дополнительные материалы
Реализация подхода требует владения стилями CSS. Убедитесь, что меню навигации хорошо отображается на маленьких экранах: настройте размер шрифта и подкорректируйте расстояния между пунктами.
Блоки
|
Этот метод имеет много общего с предыдущим решением, но требует более активного применения стилей CSS.
|
|
Стили призваны облегчить восприятие навигации и упростить попадание по целям, устранив таким образом проблему маленьких и неудобных элементов. В то же время, выделение для каждого пункта меню отдельного блока потребует большего пространства, и для устройств с маленькими экранами может оказаться далеко не лучшим решением.
Примеры
Дополнительные материалы
- Альтернативный выбор элементов: навигация через узкие окна просмотра
- Пишем код для адаптивного меню навигации
Выпадающий список
|
Очень часто в качестве элемента навигации используют стандартный для браузера выпадающий список. В основе метода лежит создание списка
<select> из <UL>-списка, для чего нужен Javascript. |
|
В разных браузерах окно будет отображаться по-разному. Таким образом, используя этот способ, невозможно добиться единообразия оформления интерфейса. Для решения этой проблемы можно настраивать оформление выпадающего списка с помощью javascript-плагинов, но есть вероятность появления новых трудностей. Для случаев, когда единообразие оформления не играет важной роли, это решение можно назвать одним из лучших.
Примеры:
Дополнительные материалы
На маленьких экранах и экранах мобильных устройств эти плагины превращают любой <UL> или <OL>-список в список <select>:
- Responsive Menu Мэтта Керсли (Matt Kersley)
- TinyNav Вильжами Салминена (Viljami Salminen)
- Convert Menu to Dropdown Криса Койера (Chris Coyier)
- SelectNav от lukaszfiszer
Раскрывающееся меню со стилями CSS
|
С идеей выпадающего списка связано использование раскрывающегося меню, оформленного при помощи CSS.
|
|
В этом случае на экранах мобильных устройств или просто маленьких экранах навигация замещается или скрывается за кнопкой «Меню», по нажатию на которую и открывается список категорий. При таком решении контент не смещается вниз — наоборот, меню закрывает собой контент и располагается прямо поверх него. Достоинством этого способа можно считать соответствие дизайна меню дизайну страницы. Решение позволяет избегать проблем, связанных с неодинаковым оформлением интерфейса в разных браузерах.
Примеры
Дополнительные материалы
- Урок по дизайну навигации для мобильных устройств на Web Designer Wall
- Адаптивное раскрывающееся меню навигации от Azad Creative
Меню, раскрывающееся со сдвигом контента
|
Аналогично раскрывающемуся меню, оформленному при помощи CSS, сдвигающая контент навигация скрывается и замещается кнопкой «Меню».
|
|
Для выбора категории пользователь должен нажать на кнопку, контент при этом сдвигается вниз. Рекомендуется поддерживать выезжающее меню эффектом движения: это упрощает восприятие элемента и придаёт решению своеобразное изящество. Разумеется, для реализации потребуется использовать Javascript. Этот способ применяется очень часто, так как он обеспечивает единообразие оформления всех элементов интерфейса и не требует большого пространства.
Примеры
Дополнительные материалы
- Flexible Navigation Джейсона Вивера (Jason Weaver)
- Twitter Bootstrap
- Адаптивное выезжающее меню, Террис Кремер (Terris Kremer)
- Большие меню и адаптивная многоуровневая навигация для маленьких экранов, Тесса Торнтон (Tessa Thornton)
Якорная ссылка на футер
|
Ещё одно простое решение — якорная ссылка на футер страницы.
|
|
Начните с создания двух меню — вверху и внизу страницы. Когда страницу откроют на маленьком экране, меню в верхней части страницы превратится в ссылку на навигацию в футере.
Примеры
Дополнительные материалы
- Простая адаптивная навигация в рамках подхода «Mobile first» на сайте Tutsplus
Навигация в боковой панели
|
Пользователям iOS к меню в боковой панели не привыкать. Этот метод навеян такими приложениями для iOS, как Facebook и Twitter. В результате создаётся эффект, будто меню спрятано в левой части экрана.
|
|
Примеры
Дополнительные материалы
- jPanel Menu, Энтони Коланжело (Anthony Colangelo)
Другие способы оформления навигации
Наряду с привычными решениями существует несколько более продвинутых вариантов: навигация во всплывающем окне (popup navigation), навигация, «вытягиваемая» жестом (pull down) и навигация, разворачивающаяся по кругу (path style).
Навигация во всплывающем окне
|
Меню навигации отображается во всплывающем модуле, например, созданном при помощи Remodelista.
|
|
Решение можно реализовать с использованием модального окна, например, FancyBox. Для создания собственного уникального стиля всплывающей навигации читайте нашурок по работе с модальными окнами.
Навигация по кругу
|
Навигация по кругу причудливее многих способов оформления, её реализация сильно зависит от CSS3 и Javascript. При нажатии на основную кнопку вокруг неё по кривой выстраиваются пункты меню.
|
|
Закрыть меню можно, выбрав один из его элементов или нажав ещё раз на основную кнопку. Если разделы меню имеют вложенные подразделы, пользователю предлагают вернуться на предыдущий уровень, либо выбрать один из представленных пунктов. Инструмент для реализации этого решения платный, найти его можно здесь: Path Style Menu.
Навигация, «вытягиваемая» жестом
|
В основе метода лежит идея обновления контента с помощью протягивания — Pull-to-Refresh.
|
|
В экспериментальном меню навигации стандартный контрол заменён жестовым управлением. Посмотреть на реализацию этого решения можно на Inspect Element.
Заключение
Мне не раз приходилось заниматься разработкой адаптивного сайта, и, по моему личному мнению, лучшим решением является выезжающее меню со сдвигом контента. Это простое и красивое решение, оно легко реализуется и отлично выглядит в сочетании с анимацией.
Надеюсь, эта статья покажется вам интересной. Всегда полезно узнать о существующих решениях какой-либо задачи: это экономит время и силы. Если вы хотите более подробно изучить сильные и слабые стороны разных способов оформления адаптивной навигации, обратитесь к статье Бреда Фроста (Brad Frost).
Автор: Кевин Лью, перевод: Proactivity
Оригинал: http://www.queness.com/post/13093/responsive-mobile-navigation-menumethods-and-solutions
