Главная > Меню и Навигация > Разработка адаптивной навигации

Разработка адаптивной навигации


13 августа 2012, 11:50. Разместил: Design FactoRy
Самый сложный этап в разработке адаптивного веб-сайта, пожалуй, заключается в разработке навигации по сайту – это очень важная часть в дизайне сайта, так как именно посредством этого люди попадают на разные страницы сайта. Существует несколько способов разработки адаптивных навигационных меню, и уже сегодня доступны многие jQuery-плагины, которые решают эту проблему буквально за секунды.

Разработка адаптивной навигации

Тем не менее, вместо того чтобы применять готовое решение, сегодня мы хотим рассмотреть процесс разработки простенького навигационного меню с нуля при помощи CSS3 media queries и немного jQuery для того, чтобы оно корректно отображалось на экранах смартфонов.

Демо | Скачать исходные материалы
Внимание! У вас нет прав для просмотра скрытого текста.


Давайте приступим.

HTML

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

…а затем добавляем следующий отрывок кода в качестве разметки навигационного меню внутрь тэга body.

<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">How-to</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Web 2.0</a></li>
<li><a href="#">Tools</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>

Как вы можете видеть выше, у нас есть 6 основных ссылок меню и дополнительная ссылка после блока ссылок. Эта дополнительная ссылка будет использоваться для открытия меню, когда оно будет скрыто на маленьких экранах.

Стили

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

body {
background-color: #ece8e5;
}

Тэг nav, который определяет навигацию, будет иметь 100% ширины в окне браузера, а ul, в котором содержатся основные ссылки нашего меню, будет иметь 600 пикселей ширины.

nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}

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

nav li {
display: inline;
float: left;
}

Как вы, возможно, заметили в HTML-разметке, приведенной выше, мы уже добавили clearfix в атрибут класса как для nav, так и для ul, чтобы очистить все окружающие элементы при выравнивании элементов внутри них при помощи хака CSS clearfix. Так что, давайте добавим следующие правила оформления в каскадные таблицы стилей.

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

Так как у нас есть 6 ссылок меню, и мы указали 600 пикселей ширины для контейнера, на каждую ссылку придется по 100 пикселей ширины.

nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}

Ссылки меню будут разделены границей толщиной в 1 пиксель, за исключением последней. Вспомните наше предыдущее руководство о модальных блоках, ширина меню будет увеличена на 1 пиксель, что сделает его ширину равной 101 пикселю из-за добавления границ, поэтому здесь мы поменяем модель box-sizing на border-box для того, чтобы меню сохраняло 100 пикселей ширины.

nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}

Далее, меню будет окрашиваться в более светлый цвет при статусах :hover или :active.

nav a:hover, nav a:active {
background-color: #8c99a4;
}

…и, наконец, дополнительная ссылка будет скрыта (только для экранов настольных ПК).

nav a#pull {
display: none;
}

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

Разработка адаптивной навигации

Media Queries

CSS3 media queries используются для того, чтоб определить, каким образом будут выстраиваться стили в определенных breakpoint’ах или при использовании конкретных размеров экранов.

Разработка адаптивной навигации

Так как наше навигационное меню изначально имеет 600 пикселей ширины, мы сначала определим стили для режима просмотра при размере экрана от 600 и меньше пикселей. Говоря практическим языком, это будет наш первый breakpoint.

При таком размере экрана, каждая вторая ссылка меню будет отображена следом за предыдущей, то есть ширина ul будет 100% от окна браузера, а ссылки меню будут занимать только 50%.

Разработка адаптивной навигации

@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}

…а затем, мы также определяем, как навигация будет отображена, если размер экрана будет 480 и меньше пикселей (это будет наш второй breakpoint).

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

Разработка адаптивной навигации

@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}

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

@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}

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

Также советуем почитать: Media Queries для стандартных устройств

Отображаем меню

На данном этапе меню сохраняется скрытым, и будет видимым только после нажатия по ссылке «Menu». Этого эффекта можно достичь при помощи jQuery slideToggle().

$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();

$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});

Тем не менее, когда вы будете масштабировать окно браузера сразу после того, как показали меню, а затем скрыли его, меню тогда будет оставаться скрытым, так как jQuery генерирует стиль display: none и применяет его к элементу.

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

$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

Итак, это весь код, который нам был нужен. Теперь мы можем просматривать меню посредством ссылки. Мы рекомендуем вам всегда тестировать адаптивные дизайны с помощью инструментов вроде Responsinator, чтобы вы могли просматривать сразу несколько размеров.
Вернуться назад