—»     —»   Адаптивное меню для экранов Retina
  Раздел: Меню и Навигация   Нет комментариев  

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



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

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

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

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

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

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

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

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

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

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

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

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

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

<nav  id="menu" class="nav">  
<ul>
<li>
<a href="#" title="">
<span class="icon"> <i aria-hidden="true" class="icon-home"></i></span><span>Home</span>
</a>
</li>
<li>
<a href="#" title=""><span class="icon"> <i aria-hidden="true" class="icon-services"></i></span><span>Services</span></a>
</li>
<li>
<a href="#" title=""><span class="icon"><i aria-hidden="true" class="icon-portfolio"></i></span><span>Portfolio</span></a>
</li>
<li>
<a href="#" title=""><span class="icon"><i aria-hidden="true" class="icon-blog"></i></span><span>Blog</span></a>
</li>
<li>
<a href="#" title=""><span class="icon"><i aria-hidden="true" class="icon-team"></i></span><span>The team</span></a>
</li>
<li>
<a href="#" title=""><span class="icon"><i aria-hidden="true" class="icon-contact"></i></span><span>Contact</span></a>
</li>
</ul>
</nav>

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

CSS и javascript-коды

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

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

/* Global CSS that are applied for all screen sizes */

.nav ul {
max-width: 1240px;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
}

.nav li span {
display: block;
}

.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
transition: color .5s, background .5s, height .5s;
}

.nav i{
/* Make the font smoother for Chrome */
transform: translate3d(0, 0, 0);
}

/* Remove the blue Webkit background when element is tapped */

a, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

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

/* Hover effect for the whole navigation to make the hovered item stand out */

.no-touch .nav ul:hover a {
color: rgba(249, 249, 249, .5);
}

.no-touch .nav ul:hover a:hover {
color: rgba(249, 249, 249, 0.99);
}

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

.nav li:nth-child(6n+1) {
background: rgb(208, 101, 3);
}

.nav li:nth-child(6n+2) {
background: rgb(233, 147, 26);
}

.nav li:nth-child(6n+3) {
background: rgb(22, 145, 190);
}

.nav li:nth-child(6n+4) {
background: rgb(22, 107, 162);
}

.nav li:nth-child(6n+5) {
background: rgb(27, 54, 71);
}

.nav li:nth-child(6n+6) {
background: rgb(21, 40, 54);
}

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

@media (min-width: 50em) {

/* Transforms the list into a horizontal navigation */
.nav li {
float: left;
width: 16.66666666666667%;
text-align: center;
transition: border .5s;
}

.nav a {
display: block;
width: auto;
}

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

/* hover, focused and active effects that add a little colored border to the different items */

.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {
border-bottom: 4px solid rgb(174, 78, 1);
}

.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
border-bottom: 4px solid rgb(191, 117, 20);
}

.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
border-bottom: 4px solid rgb(12, 110, 149);
}

.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
border-bottom: 4px solid rgb(10, 75, 117);
}

.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
border-bottom: 4px solid rgb(16, 34, 44);
}

.no-touch .nav li:nth-child(6n+6) a:hover,
.no-touch .nav li:nth-child(6n+6) a:active,
.no-touch .nav li:nth-child(6n+6) a:focus {
border-bottom: 4px solid rgb(9, 18, 25);
}

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

/* Placing the icon */

.icon {
padding-top: 1.4em;
}

.icon + span {
margin-top: 2.1em;
transition: margin .5s;
}

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

/* Animating the height of the element*/
.nav a {
height: 9em;
}

.no-touch .nav a:hover ,
.no-touch .nav a:active ,
.no-touch .nav a:focus {
height: 10em;
}

/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
margin-top: 3.2em;
transition: margin .5s;
}

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

/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 1.8em;
box-shadow: 0 0 0 0.8em transparent;
background: rgba(255,255,255,0.1);
transform: translate3d(0, 0, 0);
transition: box-shadow .6s ease-in-out;
}

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

    /* Animate the box-shadow to create the effect */
.no-touch .nav a:hover i,
.no-touch .nav a:active i,
.no-touch .nav a:focus i {
box-shadow: 0 0 0px 0px rgba(255,255,255,0.2);
transition: box-shadow .4s ease-in-out;
}

}

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

@media (min-width: 50em) and (max-width: 61.250em) {

/* Size and font adjustments to make it fit better */
.nav ul {
font-size: 1.2em;
}

}

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

/* The "tablet" and "mobile" version */

@media (max-width: 49.938em) {

/* Instead of adding a border, we transition the background color */
.no-touch .nav ul li:nth-child(6n+1) a:hover,
.no-touch .nav ul li:nth-child(6n+1) a:active,
.no-touch .nav ul li:nth-child(6n+1) a:focus {
background: rgb(227, 119, 20);
}

.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
background: rgb(245, 160, 41);
}

.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
background: rgb(44, 168, 219);
}

.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
background: rgb(31, 120, 176);
}

.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
background: rgb(39, 70, 90);
}

.no-touch .nav li:nth-child(6n+6) a:hover,
.no-touch .nav li:nth-child(6n+6) a:active,
.no-touch .nav li:nth-child(6n+6) a:focus {
background: rgb(32, 54, 68);
}

.nav ul li {
transition: background 0.5s;
}

}

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

/* CSS for a 2x3 columns version */

@media (min-width: 32.5em) and (max-width: 49.938em) {

/* Creating the 2 column layout using floating elements once again */
.nav li {
display: block;
float: left;
width: 50%;
}

/* Adding some padding to make the elements look nicer*/
.nav a {
padding: 0.8em;
}

/* Displaying the icons on the left, and the text on the right side using inline-block */
.nav li span,
.nav li span.icon {
display: inline-block;
}

.nav li span.icon {
width: 50%;
}

.nav li .icon + span {
font-size: 1em;
}

.icon + span {
position: relative;
top: -0.2em;
}

Анимацию с больших экранов довольно сложно адаптировать под меньшие в размерах, поэтому мы сделаем их более простыми, и просто анимируем границу. На этом мы завершаем еще один media query.

    /* Adapting the icons to animate the size and border of the rounded background in a more discreet way */
.nav li i {
display: inline-block;
padding: 8% 9%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1);
transition: border .5s;
}

/* Transition effect on the border color */
.no-touch .nav li:hover i,
.no-touch .nav li:active i,
.no-touch .nav li:focus i {
border: 4px solid rgba(255,255,255,0.1);
}

}

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

    /* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {

.nav li span.icon {
width: 50%;
}

.nav li .icon + span {
font-size: 0.9em;
}
}

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

//  The function to change the class
var changeClass = function (r,className1,className2) {
var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
if( regex.test(r.className) ) {
r.className = r.className.replace(regex,' '+className2+' ');
}
else{
r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
}
return r.className;
};

// Creating our button for smaller screens
var menuElements = document.getElementById('menu');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

// Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {
changeClass(this, 'navtoogle active', 'navtoogle');
}

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

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

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
display: none;
width: 100%;
padding: 0.5em 0.5em 0.8em;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-weight: normal;
text-align: left;
color: rgb(7, 16, 15);
font-size: 1.2em;
background: none;
border: none;
border-bottom: 4px solid rgb(221, 221, 221);
cursor: pointer;
}

.icon-menu {
position: relative;
top: 3px;
line-height: 0;
font-size: 1.6em;
}

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

@media (max-width: 32.438em) {

/* Unhiding the styled menu link */
.nav .navtoogle{
margin: 0;
display: block;
}

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

/* Animating the height of the navigation when the button is clicked */

/* If javascript is disabled, the menu stays open */
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}

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

/* When javascript is enabled, we hide the menu */
.js .nav ul {
max-height: 0em;
overflow: hidden;
}

/* Displaying the menu when the user has clicked on the button */
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
transition: max-height .4s;
}

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

/* Adapting the layout of the menu for smaller screens: icon on the left and text on the right */

.nav li span {
display: inline-block;
height: 100%;
}

.nav a {
padding: 0.5em;
}

.icon + span {
margin-left: 1em;
font-size: 0.8em;
}

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

/* Adding a left border of 8 px with a different color for each menu item*/
.nav li:nth-child(6n+1) {
border-left: 8px solid rgb(174, 78, 1);
}

.nav li:nth-child(6n+2) {
border-left: 8px solid rgb(191, 117, 20);
}

.nav li:nth-child(6n+3) {
border-left: 8px solid rgb(13, 111, 150);
}

.nav li:nth-child(6n+4) {
border-left: 8px solid rgb(10, 75, 117);
}

.nav li:nth-child(6n+5) {
border-left: 8px solid rgb(16, 34, 44);
}

.nav li:nth-child(6n+6) {
border-left: 8px solid rgb(9, 18, 25);
}

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

    /* make the nav bigger on touch screens */
.touch .nav a {
padding: 0.8em;
}
}

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

Изображения были созданы при помощи Minimal Apple Product Templates от WeGraphics.net

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 5082   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930