Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Navigation Design

Гибкий подход к адаптивной навигации

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

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

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


Видна ли навигация?

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

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


Шаг 1: Выбор контрольных точек

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

Screenshots of Twitter Bootstrap at desktop and mobile breakpoints

Вы можете создать контрольную точку с помощью медиа-запроса, например:

Итак, как мы выбираем контрольные точки? Один из подходов состоит в том, чтобы выбрать несколько вариантов ширины, которые соответствуют общим размерам устройства.

Twitter Bootstrap имеет несколько контрольных точек, включая точку «смартфона», которая запускается на экранах не более 480 пикселей. Он также имеет точку «планшетов в портретном режиме», которая запускается между 768px и 979px.

Вы можете заметить, что в Bootstrap нет контрольной точки для ландшафтного режима планшета. Это потому, что iPad имеет 1024 пикселя в ширину в ландшафтном режиме - такая же ширина, как и у большинства настольных компьютеров. Это приводит нас к основному недостатку такого подхода: возможная догадка о типе устройства. Устройство, которое попадает в наш «портретный планшет», в действительности может быть большим телефоном или  маленьким ноутбуком.

Медиа-запросы не скажут нам, какой тип устройства используется, но мы можем сделать такое предположение, основанное на разрешении устройства.

Альтернативный подход заключается в том, чтобы создавать контрольные точки на основании дизайна и контента. Вы можете реализовать плавающую версию вашего дизайна без контрольных точек, а затем проверить ее на разном разрешении экрана. Когда вы сталкиваетесь с шириной, некоторые вещи начинают выглядеть странно и самое время подумать о создании контрольных точек. Это подход, предложенный Итаном Маркоттом, который и придумал термин «отзывчивый дизайн».

Screenshot of the Boston Globe at three different widths

Какой подход лучше? Сколько людей - столько и мнений. Используете ли вы фреймворк, такой как Bootstrap? Считаете ли вы, что легче показать отзывчивый дизайн своей команде или клиентам, если вы можете говорить об конкретных типах устройств? Если вы ответили «да», выбор контрольных точек на основе размеров устройства будет для вас правильным. Если вы ответили «нет», выбор контрольных точек на основе дизайна и контента может дать вам больше свободы и гибкости. Это тот подход, который мы рассмотрим в этом уроке.


Шаг 2: Написание разметки

Давайте создадим простую страницу. Мы построим область «статьи», содержащую некоторый контент и навигационную панель. Рядом со статьей мы разместим боковую колонку.

Включите в ваш список примерно десять навигационных элементов для демонстрации.


Шаг 3: Основная разметка

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

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

Наш конечный результат должен выглядеть примерно так:

Screenshots of the design at small medium and large widths

Шаг 4: Добавляем контрольную точку

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

Screenshot of the demo in a small window

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

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


Шаг 5: Установите фиксированную высоту для панели навигации

Во многих случаях содержание панели навигации не вмещается в одну опрятную линию. Давайте это исправим!

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

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

Затем мы добавим класс «no-js» в наш тег. Если у пользователя есть JavaScript, Mozernizr изменит этот класс на «js». Если у пользователя нет JavaScript, класс останется «no-js».

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

Теперь, когда у нас есть рабочий класс .js, давайте использовать его, чтобы скрыть любые элементы, которые переносятся на вторую линию.


Шаг 6: Добавляем FlexMenu

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

Мы также должны указать flexMenu изменить размер меню по мере необходимости:

Теперь, когда мы изменяем размер страницы, появляется ссылка «больше», когда некоторые элементы не помещаются на навигационной панели. Вы можете навести курсор мыши на эту ссылку, чтобы отобразить раскрывающийся список с этими элементами. Когда страница становится слишком маленькой для более чем одного или двух элементов, отображаемых в навигационной панели, нам предоставляется ссылка «меню». Когда вы наведите указатель мыши или коснётесь этой ссылки, появятся все элементы навигации.

flexMenu working but looking pretty ugly

Теперь у нас есть то поведение, которое нам нужно, но выпадающее меню выглядит довольно ужасно. Все хорошо - мы исправим это на следующем этапе.


Шаг 7: Стиль flexMenu

Теперь давайте добавим некоторые стили, чтобы сделать раскрывающийся список более красивым. Мы также добавим стрелку CSS рядом с ссылкой «меню» или «больше», чтобы было понятно, что эти ссылки открывают меню.

С помощью стрелок CSS у нас не будет изображений для загрузки, а стрелки останутся в хорошем качестве на дисплеях с высоким разрешением. Этот подход работает во всех современных браузерах, а также в IE8. Если вам необходимо включить поддержку IE7 или более ранних версий, обязательно включите альтернативный вариант на основе изображений.

Screenshot of our popup menu looking pretty decent

Шаг 8: Настройка сенсорных экранов

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

Modernizr, который мы добавили ранее, предоставляет класс CSS для каждой функции, которую он проверяет. На устройствах с сенсорными экранами он добавит класс «touch». На устройствах без сенсорных экранов он добавит класс «no-touch».

Mmm Big Type

Поскольку мы выражали все наши размеры в ems, мы можем масштабировать всю навигацию вверх или вниз согласно с его размером шрифта. Одна строка выше (в норме, по умолчанию три, так как мы ее отделили) регулирует не только размер текста, но также размер стрелок, высоту навигатора, отступы по ссылкам и границу между элементами.

Примечание. Класс .touch обозначает поддержку сенсорных событий, которая позволяет разработчикам создавать сенсорный ввод в веб-приложения. Устройства, которые имеют как сенсорные экраны, так и мыши (например, Windows планшеты 8), скорее всего, получат класс .touch. Большинство сенсорных устройств имитируют события мыши для целей совместимости, поэтому в настоящее время нет возможности использовать Modernizr для обнаружения устройств с сенсорными экранами и мышами.

Screenshot of our responsive navbar on an iPhone

Шаг 9: Кроссбраузерная совместимость

Если вы дойдете до демонстрации в IE7, вы, вероятно, заметите две проблемы:

  • Когда вы изменяете размер окна, боковая панель иногда оказывается ниже статьи, прежде чем мы достигаем контрольной точки.
  • Выпадающее меню - на один пиксель ниже нижней части ссылки «больше», поэтому меню исчезает, когда вы пытаетесь навести курсор над ним.

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

Чтобы это преодолеть, мы можем установить фиксированную ширину для нашей страницы для IE7. Для этого сначала добавим класс «меньше IE8» в верхней части нашей страницы.

Затем добавим CSS, который устанавливает определенную ширину для статьи и боковой колонки для IE7. Общая ширина этих областей, плюс внутренние и внешние отступы, надбавка для округления, составляет 901 пиксель.

Вы также можете заметить, что на iOS уровень масштабирования изменяется при повороте устройства с портрета на альбомный. Чтобы исправить эту проблему, используйте это решение на основе JavaScript и разместите его в нижней части страницы. Эта проблема, по-видимому, была исправлена в iOS 6.


Дальнейшее чтение

Статьи Брэда Фроста. Адаптивные шаблоны для навигации и сложные навигационные шаблоны для адаптивного дизайна охватывают широкий спектр подходов к навигации на адаптивных сайтах.

Luke Wroblewski также является отличным ресурсом для гибких и мобильных шаблонов дизайна. В частности, его подход Off Canvas довольно умен: он размещает навигацию и другой вторичный контент за экраном на небольших устройствах. Когда пользователь нажимает кнопку, содержимое перемещается влево или вправо.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.