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

Адаптивное меню, с поддержкой Retina-дисплеев

0

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

  • Горизонтальное меню на мониторах компьютеров
  • Двухколоночное вертикальное меню на планшетах
  • На смартфонах меню будет скрыто и будет добавлена ссылка для его отображения или скрытия.

Изображения к меню мы вставим через шрифт из иконок, чтобы не было потери их качества на устройствах с Retina-дисплеями.

Смотреть Демо

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

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

Перейдем к действиям. Перейдите к сервису IcoMoon, чтобы создать шрифт с иконками. Там вы можете выбрать уже доступные иконки для пунктов вашего меню, или предварительно нарисовать их самому в векторном редакторе, как Adobe Illustrator или Inscape, и добавить их в свой шрифт.

icomoon-import

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

font-settings

Нажав на кнопку “Download” мы скачиваем ZIP-архив, в котором находится наш шрифт в 4-х форматах, CSS-стили и демонстрационная страница.

Чтобы все заработало, скопируйте папку шрифтов в папку со страницей и в самое начало вашего файла стилей вставьте стили от IcoMoon. Еще, чтобы шрифт выглядел лучше на Chrome под ОС Windows, вы можете попробовать следующий хак.

HTML код меню

HTML-разметка нашего меню выглядит следующим образом:

 

Чтобы использовать нашим иконочным шрифтом, мы добавляем класс icon-iconname к элементу <i>. Хоть здесь и не обозначено, но тег <body> должен иметь класс no-js (который будет изменен на js через Modernizr). Идея состоит в том, чтобы можно было оставить меню открытым, если пользователь отключил JavaScript.

CSS и JavaScript

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

Глобальные стили будут применяться для всех размеров экранов:

 

 

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

 

 

Используя медиа запрос для экранов с минимальной шириной в 800 пикселей (50em), зададим вывод горизонтального меню

 

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

 

Теперь разместим иконки и текст.

 

Изменим высоту элементов, при наведении (она плавно увеличится, т.к. мы уже применяли свойство transition):

 

Позиционируем иконки и приготовим их к плавному переходу

 

Добавим визуальные эффекты, как тень и плавный переход, и завершаем первый медиа запрос

 

Создаем еще один медиа запрос для экранов с шириной между 800 и 980 пикселей:

 

Теперь, когда мы закончили “настольную” версию меню (конечно же в кавычках, так как все больше и больше планшетов имеют ширину экрана 1024px и больше), перейдем к стилизации меню на планшетах и смартфонах.

 

Для размера экрана между 520 и 799 пикселей (только для планшетов), мы хотим показать наше меню в 2 столбца и 3 строки. Теперь значок будет слева, а текст справа.

 

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

Адаптируем размер шрифта и ширину для маленьких экранов

 

Для очень маленьких экранов мы cпрячем навигацию и добавим кнопку “Меню”, на которую посетитель нажмет для показа навигации. Чтобы сделать это, мы опираемся на несколько строк JavaScript:

 

Для того чтобы иметь более чистый HTML, я решил создать кнопку “Меню” и вставить его в DOM используя JavaScript. Функция changeClass помогает нам для переключения между активными и не активным классом, когда пользователь нажимает на кнопку.

Следующие стили для кнопки “Меню”:

 

По умолчанию, данная кнопка скрыта. Мы ее отобразим на экранах шириной не более 519 пикселей:

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

 

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

 

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

 

Также добавляем границу слева в 8 пикселей с клевым цветом:

 

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

 

Теперь все готово! Мы сделали клевое адаптивное меню, дружелюбное к сенсорам и Retina-экранам. Думаю вам понравилось!

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

Данный урок приготовлен для вас командой сайта WebDesignMagazine.ru

Поделиться:

Об Авторе

Молодой и прогрессивно развивающийся веб-дизайнер. Работаю с HTML5, CSS3, JavaScript & jQuery, WordPress. Еще мои уроки и статьи можно прочитать на моем блоге.