В этом уроке мы покажем как создать респонсивное меню навигации, которое будет адаптироваться под различные размеры экрана, с помощью CSS медиа-запросов.
Параметры дизайна: от маленького до большого экрана
Дизайн меню мы начнем с его адаптации под мобильные устройства. В сущности, такой подход подразумевает стратегию дизайна сперва для мобильных устройств, а затем для больших экранов настольных мониторов. Базовый дизайн разработан для популярных размеров мобильных устройств – 320 х 480. Мы будем использовать медиа запросы для масштабирования под большие размеры экранов.
Размеры экранов, для которых предназначается меню:
- 320 x 480
- 480 x 320
- 768 x 1024
- 1024 x 768
Разметка
Внутри header мы добавили два nav тега, один для кнопки, которая открывает меню, в то время как другой тэг содержит пункты меню. Каждый пункт меню содержит a span для презентации значка-иконки.
С целью сокрытия кнопки #menu-button, когда экран достаточно широк, чтобы меню было постоянно видимым рядом с логотипом, мы поместили #menu-drink после #banner-inner-wrapper внутри header. Это позволит нам расположить меню рядом или под логотипом.
<header id="banner" role="banner">
<div id="banner-inner-wrapper">
<div id="banner-inner">
<hgroup id="title">
<img id="logo" src="image/logo.png" title="Responsive Bar" />
</hgroup>
<nav id="menu-nav">
<!-- кнопка открыть и закрыть меню -->
<div id="menu-button">
<div id="menu-button-inner"></div>
</div>
</nav>
</div>
</div>
<!-- МЕНЮ -->
<nav id="menu-drink">
<ul>
<li>
<a class="beer" href="#"><span class="icon"></span>Пиво</a>
</li>
<li>
<a class="wine" href="#"><span class="icon"></span>Вино</a>
</li>
<li>
<a class="soft-drink" href="#"><span class="icon"></span>Ликер</a>
</li>
<li>
<a class="coffee-tea" href="#"><span class="icon"></span>Кофе & Чай</a>
</li>
</ul>
</nav>
</header>CSS стили
Мы оспользуем таблицу CSS, чтобы установить расположение контента хэдера – display:table для #banner-inner-wrapper, display:table-row для #banner-inner и display:table-cell для #title и menu-nav.
Зачем использовать таблицы CSS? Потому что они надежней против изменений макета и требует меньше работы, чем поплавки и display:inline-block, если вы хотите сохранить колонки бок о бок.
Мы также указали логотипу уменьшаться до доступного пространства своего контейнера, применив max-width:100%. Это предотвращает изображение от пребывания больше, чем ширина данная его контейнеру.
Одна из стратегий, которую следует отметить, это использование em вместо px. Полезным свойством данного устройства является то, что он приятно масштабируется до текущего размера шрифта элемента. Чтобы решить эту задачу, разделите число пикселей на текущий размер шрифта (в данном случае 16px).
#banner-inner-wrapper {
display: table;
width: 96%;
margin: 0.375em auto; /* 6/16 = 0.375em; */
}
#banner-inner {
display: table-row;
}
#title {
display: table-cell;
}
#logo {
max-width: 100%;
vertical-align: middle;
}
#menu-nav {
display: table-cell;
vertical-align: bottom;
text-align: right;
}Мы стилизовали кнопку, которая открывает меню, большим количеством CSS3 кода. В частности, мы использовали border-radius, box-shadow и background-image: linear-gradient(...). Мы также использовали transition свойство, чтобы сгладить переход между различными состояниями кнопки.
Отметим, что в CSS, мы исключили браузер/поставщик специфические свойства, такие как -moz-transition и -webkit-box-shadow, для простоты. В самом файле CSS эти свойства включены.
#menu-button {
vertical-align: bottom;
float: right;
padding: .375em; /* 6/16 = .375em */
margin: 0 .375em 0 2em; /* 6/16 = .375em, 32/16 = 2em */
opacity: .7;
cursor: pointer;
transition: all .2s linear;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
background-color: #4D8EBC;
background-image: linear-gradient(top,rgba(100, 152, 190, .5),
rgba(30, 82, 120, .5));
background-position: left bottom;
background-repeat: repeat-x;
}Мы изменили стиль кнопки :active, чтобы позволить ей менять внешний вид, когда она была выбрана. Кроме того, мы добавили к ней отрицательное нижний маржин , чтобы она опустилась, делая втд, что её выбрали/кликнули.
#menu-button.selected,
#menu-button:active {
opacity: 1;
box-shadow: 0 1px 1px rgba(120, 120, 120, .2);
background-color: #2E6288;
background-image: linear-gradient(top,rgba(25, 68, 99, .5),
rgba(30, 82, 120, .5));
margin-bottom: -.375em; /* 6/16 = .375em */
}Последние штрихи…
#menu-button-inner {
background: transparent url(../image/menu-bg.png) no-repeat 0 0;
width: 78px;
height: 41px;
}А вот и результат нашего CSS
Чтобы убедиться, что меню не занимает весь экран, когда оно появляется, мы рассмотрели три следующих варианта:
Вариант 1: отображать все элементы вертикально, каждый в отдельной строке
Вариант 2: отображать по два элемента в каждой строке
Вариант 3: Отображать все элементы по горизонтали, все в один ряд
Вариант 1 был бы лучшим выбором, если единственное ограничение состояло бы в ширине экрана, потому что не нужно было бы беспокоиться о сжатии элементов. К сожалению, высота у нас весьма ограничена, поэтому мы выбираем вариант 2.
Для контейнера меню #menu-drink, мы использовали box-shadow, чтобы казалось, что он плавает над содержанием.
#menu-drink {
clear: both;
position: absolute;
width: 100%;
background-color: #2e6288;
box-shadow: 0 2px 2px rgba(25, 68, 99, .4);
display: none; /* не показан изначально */
}Для реализации варианта 2, мы установили ширину li до 50%.
#menu-drink ul {
overflow: hidden; /* clears the float */
}
#menu-drink li {
float: left;
width: 50%; /* takes up 50% of the available width */
}Остальным CSS для меню будет только для настройки пунктов меню. В CSS ниже, мы выделили некоторые важные свойства, которые легко пропустить:
#menu-drink a {
color: #c2daeb;
white-space: nowrap;
text-decoration: none;
display: block;
transition: color 0.3s linear, background-color 0.3s linear;
box-shadow: inset 0 0 2px #0A3E64;
padding: .375em; /* 6/16 = .375em */
/* Выравние контента по вертикали */
line-height: 2.875em; /* 46/16 = 3.375em */
height: 2.875em; /* 46/16 = 3.375em */
}
#menu-drink a:hover,
#menu-drink a:active {
color: #fff;
background-color: #23577D;
}
#menu-drink .icon {
background: transparent url(../image/drink-flat.png) no-repeat 0 0;
/* Иконки рядом с текстом */
display: inline-block;
vertical-align: bottom;
opacity: .6;
width: 2em; /* 32/16 = 2em */
height: 2.875em; /* 46/16 = 2.875em */
margin-right: .5em; /* 8/16 = 0.5em */
transition: opacity 0.3s linear;
}
#menu-drink a:hover .icon {
opacity: 1;
}
#menu-drink .wine .icon {
background-position: 0 0;
}
#menu-drink .beer .icon {
background-position: -2em 0; /* 32/16 = 2em */
}
#menu-drink .coffee-tea .icon {
background-position: -4em 0; /* 64/16 = 4em */
}
#menu-drink .soft-drink .icon {
background-position: -6em 0; /* 96/16 = 6em */
}Медиа запросы
Ниже приведены медиа запросы, которые мы использовали. Чтобы сделать все коротко и просто, мы исключили фактический CSS для стилизации меню для различных размеров экрана. Вместо этого, мы вставили комментарии, что было сделано:
@media screen and (min-width: 480px) {
/*
* Сделали так,
что все элементы
отображаются горизонтально, так как экран достаточно широк, чтобы их разместить
*/
}
@media screen and (min-width: 560px) {
/*
* Внесли небольшие корректировки в поля и отступы вокруг пунктов меню
*/
}
@media screen and (min-width: 768px) {
/*
* Сделали так,
чтобы элементы отображались рядом с логотипом.
При такой * ширине, экран достаточно большой,
так что нет никакой необходимости скрывать меню
*/
}
@media screen and (min-width: 1024px) {
/*
* При этой ширине, все кажется немного ограниченым,
поэтому мы сделали больше пэддинг вокруг всего, чтобы создать иллюзию пространства.
*/
}jQuery и JavaScript
Переходим к jQuery коду для меню. Мы использовали jQuery, чтобы показать или скрыть меню, когда выбрана кнопка, а также при изменении размеров окна.
jQuery(function($) {
// Это удержит состояние всплывающего меню
var open = false;
function resizeMenu() {
// если окно меньше 480px в ширину
if ($(this).width() < 480) {
if (!open) {
// Спрятать меню если оно не должно отображаться
$("#menu-drink").hide();
}
// Display the button
$("#menu-button").show();
}
else if ($(this).width() >= 480) {
// Если окно шире 480px
if (!open) {
// Показать меню если оно еще не было показано
$("#menu-drink").show();
}
// Скрыть кнопку,
если экран достаточно широкий, чтобы всегда показывать меню
$("#menu-button").hide();
}
}
function setupMenuButton() {
$("#menu-button").click(function(e) {
e.preventDefault();
// если уже показано...
if (open) {
// спятать меню
$("#menu-drink").fadeOut();
$("#menu-button").toggleClass("selected");
}
else {
// Если нет, то показать меню
$("#menu-drink").fadeIn();
$("#menu-button").toggleClass("selected");
}
open = !open;
});
}
// Добавьте обработчик функции для изменения размера окна
$(window).resize(resizeMenu);
// Инициализировать меню и кнопки
resizeMenu();
setupMenuButton();
});
Теперь у нас есть респонсивное меню навигации, аккуратно оформленное в CSS3. Ознакомьтесь с демо, а также скачайте себе этот пример, для использования в будущем.
Высоких конверсий!
