В этом уроке мы расскажем о способе создания адаптивного меню.  Это меню использует чистую разметку HTML5 и может быть выровнено по левой стороне, центру или правой стороне. Меню раскрывается, когда пользователь наводит указатель мыши, а также обладает индикатором, показывающим активный/текущий элемент меню. Это меню работает во всех браузерах на мобильных устройствах и настольных компьютерах, включая браузер Internet Explorer. 

Демонстрация работы

Цель

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

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

Разметка HTML

Вот разметка для этого меню. Тег <nav> нужен, чтобы создать выпадающий список со свойством CSS абсолютного расположения. Мы объясним это ниже. Класс .current показывает активную/текущую ссылку меню.

<nav class="nav">
<ul>
<li class="current"><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

CSS

CSS для версии меню для настольных компьютеров довольно понятен, так что мы не будем вдаваться в подробности. Заметьте, что мы задали свойство display:inline-block вместо float:left для элементов <li> меню. Это позволит выравнивать кнопки меню по левой стороне, центру или правой стороне, задавая значение свойства text-align элементу <ul>.

/* Меню */
.nav {
position: relative;
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}

Выравнивание по центру и правой стороне

Как упомянуто выше, Вы можете изменить выравнивание кнопок, используя свойство text-align.

/* Меню справа */
.nav.right ul {
text-align: right;
}
/* Меню в центре */
.nav.center ul {
text-align: center;
}

Поддержка браузера Internet Explorer

Тег HTML5 <nav> и media query не поддерживаются браузером Internet Explorer 8 и ниже. Включите в код css3-mediaqueries.js или respond.js и html5shim.js, чтобы обеспечить обратную совместимость. Если Вы не хотите включать html5shim.js, замените тег <nav> тегом <div>.

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Адаптивность

Переходим к самой интересной части — сделать меню адаптивным с помощью media query. Если Вы не знакомы с адаптивным дизайном, Вы можете прочитать наши предыдущие статьи об адаптивном дизайне и media query.

В переходной точке 600px мы задали элементу меню относительное расположение, чтобы мы могли разместить список меню <ul> сверху с абсолютным расположением. Мы спрятали все элементы <li>, задав им свойство display:none, но оставили .current <li>, показывая его блоком. После этого мы снова задали всем элементам <li> свойство display:block, когда пользователь наводит указатель мыши на меню, что создаст выпадающий список. Мы добавили графическую «галочку» элементу .current, чтобы показать, что это активный элемент. Для центрального и правого выравнивания меню используйте свойства левого и правого отступов, чтобы расположить список <ul>. Посмотрите пример, чтобы увидеть окончательный результат.

@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}

/* При наведении указателя мыши на меню*/
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}

/* Меню справа */
.nav.right ul {
left: auto;
right: 0;
}
/* Меню в центре */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

• Создание необычного выезжающего меню с использованием jQuery
• Создание вытягиваемого бокового меню для веб-сайта
• Создаем меню с нестандартными шрифтами на CSS3 и jQuery