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

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

От автора: адаптивное меню для Retina с поддержкой сенсорного ввода и тремя разметками для разных размеров браузера.

Сегодня мы создадим яркое адаптивное и подходящее к экранам Retina меню, вдохновленное цветовой палитрой Maliwan, производителя игры «Borderlands». Меню автоматически изменяется под одну из трех разных разметок в зависимости от размера окна браузера: встроенную версию «десктопа», оптимизированную под «таблетку» версию с двумя колонками и мобильную версию с ссылкой на меню для отображения и сокрытия навигации для маленьких экранов. Чтобы сделать меню полностью под retina, мы применим шрифты-иконки с тем, чтобы иконки меню при изменении размера не поддавались пикселизации.

скачать исходникидемо

Подготовка шрифта-иконки

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

При щелчке на “Download” мы получаем файл ZIP с 4 форматами шрифта (SVG, EOT, TTF и WOFF), стили CSS и демо-страницу.
Первое, что следует сделать для использования иконок – скопировать и вставить CSS, предоставляемый IcoMoon, в верх своего файла CSS и убедиться, что папка со шрифтом тоже скопирована. Вы, возможно, захотели бы узнать о маленьком хаке сделать шрифты в окнах Chrome еще симпатичнее.

HTML-код меню

Вот как выглядит HTML нашей навигации:

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

CSS и JavaScript

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

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

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

Применяя медиазапрос min-width, можно выбрать экраны более 800px (50em при размере шрифта body в 15px), чтобы трансформировать свой список в красивую горизонтальную навигацию:

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

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

Мы анимируем высоту элементов когда проводим над ними мышью:

Затем размещаем иконки и готовим их к переходу CSS:

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

Устанавливаем второй медиазапрос в соответствии с экранами размером от 800 до 980px:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Теперь, когда мы закончили с версией для десктопов (под ОГРОМНЫМ вопросом, так как сегодня все больше «таблеток» имеют размеры экрана 1024px и более), позаботимся о глобальном CSS для экранов размером менее 800px, что равняется 49.938em, применив медиазапрос max-width.

При размере экрана от 520px (32.5em) до 799px (49.938em) нам нужно отобразить свое меню в разметке из двух колонок и трех строк. Добавляем отступ, чтобы элементов можно было легко коснуться, и отображаем иконки слева, а текст справа.

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

И снова адаптируем размер шрифта и ширину к более маленьким экранам.

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

Чтобы HTML стал чище, я решил создать кнопку “menu” и вставить ее в DOM с помощью JavaScript’а. Функция changeClass помогает нам переключать класс с active на no при щелчке пользователя по кнопке. Теперь у нас есть все, что нужно для малоэкранной версии, и можно назначать ей стили с помощью CSS. Определяет стили кнопки меню следующий код:

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

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

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

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

Также добавляем рамку красивого цвета в 8px слева от каждого элемента

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

Вот и все, мы создали красивую, удобную для сенсорных и retina-устройств навигацию, отлично работающую как на десктопах, так и на «таблетках» и мобильных устройствах. Надеюсь, она вам понравилась!

Автор: Stephanie Walter

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Николай

    Здравствуйте, а у вас есть курс по адаптивной верстке? Ваш курс резиновая верстка он относится к адаптивной? или это совсем другое?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree