Адаптивное меню для экранов Retina

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

Подготавливаем иконический шрифт

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

Первое, что нам нужно сделать, это создать иконки для меню. Мы используем Illustrator, но вы можете воспользоваться любым графическим редактором вроде Inkscape. Нам нужно создать каждую иконку отдельно и экспортировать их в SVG-файл. Чтобы убедиться в том, что иконка будет работать корректно во всех браузерах, нам нужно конвертировать все линии в полноценные объекты, и затем соединить объекты в одну большую фигуру для каждой иконки. Как только мы закончили экспорт в SVG-файлы, мы можем импортировать их в инструмент IcoMoon App:


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

Когда мы нажимаем Download, мы получаем zip-файл с 4 шрифтами в разных форматах (SVG, EOT, TTF и WOFF), css-стили и демо-страницу.

Первое что нам нужно сделать, чтобы иметь возможность использовать иконки, это скопировать и вставить CSS-код, который IcoMoon предоставляет нам в самом верху CSS-файла, и убедиться в том, что мы также скопировали папку шрифтов. Существует небольшой «хак», который позволяет улучшить внешний вид шрифтов в Chrome Windows.

HTML-код для меню

Вот так будет выглядеть HTML-код для нашего навигационного меню:


Чтобы использовать иконический шрифт, мы просто используем класс icon-iconname внутри элемента i (span-элемент также подойдет). Также обратите внимание на то, что мы добавили класс no-js к телу, который будет изменяться на js при помощи Modernizr. Суть заключается в том, чтобы иметь возможность оставить меню включенным на случай, если у пользователя будет отключена поддержка javascript. Мы также воспользуемся Modernizr, чтобы определить, имеется ли поддержка Touch.

CSS и javascript-коды

Обратите внимание, что здесь, в кодах, мы не указывали браузерные префиксы, но вы можете видеть их в исходных файлах.

Общий css, который будет применяться ко всем размерам экранов, выглядит следующим образом:


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


Затем мы добавляем некоторые красивые цвета фона ко всем элементам. Нижеприведенный код использует технику nth-child для выбора пунктов списка. Таким образом, вы можете добавлять сколько угодно пунктов списка, так как код будет повторяться.


Используя media query min-width, мы можем определять экраны, размер которых больше 800 пикселей (50em, при значении font size равным 15px), чтобы преобразовать наш список в привлекательное горизонтальное меню:


Мы продолжаем использовать технику отбора nth-child, чтобы добавить границу толщиной 4px с разными цветами для каждого пункта меню. Мы применяем этот эффект при наведении курсора, но и также для активных вкладок, чтобы он работал на touch-устройствах и при управлении посредством клавиатуры.


Затем мы помещаем иконки и текст:


Далее мы анимируем высоту элементов при наведении курсора:


Затем мы помещаем иконки и подготавливаем их к css-переходу:


Чтобы получить необходимый нам визуальный эффект, мы изменяем тень блока и ее размер с 0.8em до 0, а также изменяем цвет с прозрачности до цвета с высоким уровнем непрозрачности. Здесь мы завершаем наш первый этап media-query.


Мы также настроим второй media query, чтобы обеспечить нормальное отображение на экранах от 800 до 980px:


Теперь, когда мы разобрались с версией для «настольных» ПК (в больших-больших кавычках, так как сегодня все больше и больше планшетных ПК предоставляют разрешении более 1024 пикселей), давайте при помощи media query max-width позаботимся о «глобальном» CSS для экранов размером меньше 800 пикселей, что здесь равняется 49.938em.


Опять же, для маленьких экранов мы изменяем значения font-size и width.


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


Чтобы наш HTML-код был более опрятным, мы решили создать кнопку menu и вставить ее в DOM при помощи javascript. Функция changeClass поможет нам переключиться между классами active и no, когда пользователь кликает по кнопке.

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


По умолчанию, кнопка меню скрыта. Нам нужно отобразить ее, если размер экрана будет меньше 519px (32.438em):


Мы анимируем высоту навигации, когда пользователь нажимает на кнопку. Чтобы закрыть навигацию, мы задаем 0em height, чтобы открыть ее, мы задаем свойство 30em max-height. Если javascript отключен, у нас не будет никакой кнопки, мы просто воспользуемся классом no-js, чтобы навигация отображалась постоянно.


Когда поддержка javascript включена, мы по умолчанию скрываем меню, и отображаем его тогда, когда пользователь нажимает на кнопку, которая затем получает класс active:


Мы адаптировали структуру для маленьких экранов, отобразив навигацию в форме списка пунктов с иконкой слева и текстом справа:


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


При тестировании уменьшенной версии меню на настольных ПК, она выглядит вполне привлекательно. Но на мобильном устройстве могут возникнуть сложности с нажатием на кнопки. Если у устройства предусмотрена поддержка touch, то к телу документа добавляется класс touch. Мы можем использовать данный класс для улучшения опыта взаимодействия с пользователями сенсорных устройств, и для того, чтобы сделать пункты навигации слегка больше, чтобы исключить возникшую проблему. И на этом мы закрываем наш последний media query.


И на этом все! Мы создали вполне привлекательное адаптивное меню с поддержкой Retina и сенсорных устройств, которое будет отлично смотреться и работать как на настольных ПК, так и мобильных устройствах с маленькими экранами! Надеемся, вам понравилось!