В этом уроке мы научимся создавать адаптивное меню с помощью CSS.
От автора: я уже писал учебник о том, как сделать мобильную навигацию для адаптивного дизайна, теперь я открыл новую методику создания адаптивного меню без применения Javascript’а. В нем используется чистая семантическая разметка HTML5. Меню можно выравнивать по левой стороне, по центру или справа. В отличие от предыдущего учебника, где его нужно переключать, это меню переключается при проведении мышью, что более удобно для пользователя. В нем также имеется индикатор, показывающий активный/текущий элемент меню. Оно работает во всех мобильных и настольных браузерах, включая Internet Explorer!
Цель урока «Создание адаптивного меню для сайта»
Цель урока по созданию адаптивного меню для сайта — показать вам, как на маленьком дисплее превратить обычное меню-список в выпадающее меню.
Этот прием практично применять при навигации с множеством ссылок, как ниже на скриншоте. Все кнопки можно сжать в элегантное выпадающее меню.
Разметка nav HTML
Вот разметка адаптивного меню для сайта. Тэг nav требуется для создания выпадающего меню со свойством css position:absolute. Позже в учебнике я это объясню. Класс .current показывает активную/текущую ссылку меню.
|
1 2 3 4 5 6 7 8 9 |
<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-код для адаптивного меню сайта (с точки зрения компьютера-десктопа) довольно прост и незамысловат, поэтому я не собираюсь вдаваться в детали. Обратите внимание, что я задал для элемента nav li display:inline-block вместо float:left. Это дает возможность кнопкам меню выравниваться по левой стороне, центру или справа путем определения text-align для элемента ul.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* nav */ .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.
|
1 2 3 4 5 6 7 8 9 |
/* правый nav */ .nav.right ul { text-align: right; } /* центральный nav */ .nav.center ul { text-align: center; } |
Поддержка Internet Explorer’а
Тэг HTML5 nav и медизапрос не поддерживается Internet Explorer’ом 8 и более старыми версиями. Для альтернативной поддержки включите css3-mediaqueries.js (или respond.js) и html5shim.js. Если не хотите добавлять html5shim.js, замените тэг nav тэгом div.
|
1 2 3 4 |
<!--[if lt IE 9]> <script src="//css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> |
Создание адаптивности меню в сайте
Теперь начинается самое интересное – делаем меню адаптивным с помощью медиазапроса! Прочтите мои предыдущие статьи об адаптивном дизайне и медиазапросе, если ранее с ними не знакомы.
На контрольной точке 600px я задам элементу nav в относительное позиционирование для того, чтобы разместить список меню ul сверху в абсолютной позиции. Скрываю все элементы li, указывая display:none, но продолжаю показывать .current li как блок. Затем при nav hover я устанавливаю все li снова на display:block (так сгенерируется результат выпадающего списка). Я добавил графическое изображение иконки «галочки» к текущему элементу .current, чтобы показать его активность. Чтобы выровнять меню по центру и правой стороне, применим к списку ul свойства left и right. Увидеть окончательный результат можно на демоверсии.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
@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; /* скройте все элементы <li> */ margin: 0; } .nav .current { display: block; /* показывайте только текущий элемент <li> */ } .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; } } |
Источник: //webdesignerwall.com/
Редакция: Команда webformyself, надеемся у вас получилось создать для своего сайта адаптивное меню.
Комментарии (4)