От автора: несомненно, адаптивная технология становится все более популярной. Она позволяет нам сэкономить время при разработке дизайна, предназначенного для применения на множестве устройств: от мобильных до широкоэкранных компьютеров. Не нужно разрабатывать отдельные версии сайта для каждого формата (устройства). Сегодня мы создадим новое адаптивное меню, которое выглядит, как в facebook’е*. Для его создания не понадобится javascript, все выполняется с помощью одного CSS3 (для IE7-IE10, Firefox, Opera, Safari, Chrome и iPad/iPod/iPhone).
К сегодняшнему уроку мы приготовили две демонстрации (разные адаптивные результаты). Первое меню превращается в select, второе – в вертикальное меню (для открытия подменю можно пользоваться сенсорным экраном):
Шаг 1. HTML
Основа меню обычная, на базе UL-LI:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ul id="nav"> <li><a href="#">Home</a></li> <li class="subs"><a href="#s1">Menu 1</a> <ul> <li><a href="#">Submenu A</a></li> <li><a href="#">Submenu B</a></li> <li><a href="#">Submenu C</a></li> <li><a href="#">Submenu D</a></li> </ul> </li> <li class="subs"><a href="#s2">Menu 2</a> <ul> <li><a href="#">Submenu E</a></li> <li><a href="#">Submenu F</a></li> <li><a href="#">Submenu G</a></li> <li><a href="#">Submenu H</a></li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="//www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</a></li> </ul> |
На этом этапе все должно быть понятно. Для создания первой версии (с применением select) нам нужно добавить этот элемент (под меню):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<select id="nav_v2" onchange="window.location.href = this.options[this.selectedIndex].value"> <option selected="selected" value="">Choise Page...</option> <option value="#">Submenu 1</option> <option value="#">Submenu A</option> <option value="#">Submenu B</option> <option value="#">Submenu C</option> <option value="#">Submenu D</option> <option value="#">Submenu 2</option> <option value="#">Submenu E</option> <option value="#">Submenu F</option> <option value="#">Submenu G</option> <option value="#">Submenu H</option> <option value="#">Submenu 3</option> <option value="#">Submenu 4</option> <option value="#">Submenu 5</option> <option value="//www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</option> </select> |
По умолчанию этот селектор скрыт. Он виден только на маленьких устройствах (из-за своих адаптивных правил)
Шаг 2. CSS
В этом разделе мы начинаем украшать навигационное меню. Сначала нужно назначить общие стили:
css/main.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
* { margin: 0; padding: 0; } html { background-color: #E9EAED; height: 100%; } body { color: #333333; font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif; } /* прочие элементы */ #nav_v2 { display: none; } |
Теперь можно подготовить стили элементов первого уровня:
|
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 |
/* элементы первого уровня */ #nav, #nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background-color: rgb(78,105,162); background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1))); background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); border-bottom: 1px solid #3A4B7B; height: 22px; padding: 10px 0 10px 5px; position: relative; } #nav > li { float: left; height: 22px; padding-right: 6px; position: relative; text-align: left; } #nav > li > a { border: 1px solid transparent; color: #FFFFFF; display: block; font-size: 12px; font-weight: bold; height: 27px; line-height: 27px; margin: -3px 0 0 -1px; padding: 0 1px 0 11px; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); } #nav > li:hover > a, #nav > a:hover { background-color: #425691; border-radius: 2px 2px 2px 2px; color: #FFFFFF; margin-right: -8px; padding: 0 9px 0 11px; position: relative; z-index: 1; } #nav > li.subs:hover > a { background-color: #FFFFFF; border: 1px solid rgba(100, 100, 100, 0.4); border-bottom-width: 0; border-radius: 2px 2px 0 0; color: #000000; text-shadow: 0 0 transparent; z-index: 2; } |
У меню имеется голубая градиентная полоса, все элементы выровнены согласно float:left (горизонтально рядом друг с другом). Следующий элемент – это разделитель элементов меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* разделитель верхних элементов */ #nav > li:after { background-color: #405791; content: ""; height: 17px; left: 1px; position: absolute; top: 2px; width: 1px; } #nav > li:first-child:after { background-color: transparent; } |
И еще нужно добавить стили подменю (выпадающего):
|
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 |
/* подменю */ #nav ul { background-color: #FFFFFF; border: 1px solid rgba(100, 100, 100, 0.4); *border: 1px solid rgb(100, 100, 100); border-radius: 0 0 3px 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); display: none; left: -1px; margin-top: 2px; min-width: 200px; padding: 6px 0; position: absolute; top: 100%; z-index: 1; } #nav li:hover ul { display: block; } #nav ul li a { border-bottom: 1px solid transparent; border-top: 1px solid transparent; color: #232B37; display: block; font-size: 12px; line-height: 20px; padding: 0 22px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } #nav ul li a:hover { background-color: #6D84B4; border-bottom: 1px solid #3B5998; border-top: 1px solid #3B5998; color: #FFFFFF; } |
Вот так. Меню завершено, и мы готовы начать добавление адаптивных стилей (с помощью медиазапросов). Медиазапросы CSS3 применяются для определения того, каким образом стили будут меняться в определенных контрольных точках (и особенно размеры экрана устройства ). Как вы помните, для первого демо-примера мы подготовили select, давайте теперь модифицируем его стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* адаптивные правила */ @media all and (max-width : 980px) { #nav { display: none; } #nav_v2 { background-color: rgb(78,105,162); border: 1px solid #3A4B7B; color: #FFFFFF; cursor: pointer; display: block; margin-bottom: 30px; padding: 6px; width: 100%; } #nav_v2 select { color: #FFFFFF; cursor: pointer; } } |
Первое меню, наконец, готово и получило свои адаптивные стили.
Версия 2 – Вертикальное меню
Для создания возможности управления меню с сенсорной панели можно воспользоваться простым приемом – применить псевдоэлемент :target. Сначала нужно модифицировать разметку HTML (добавить несколько скрытых элементов span):
index2.html
|
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 |
<ul id="nav"> <li><a href="#">Home</a></li> <span id="s1"></span> <li class="subs"><a href="#s1">Menu 1</a> <ul> <li><a href="#">Submenu A</a></li> <li><a href="#">Submenu B</a></li> <li><a href="#">Submenu C</a></li> <li><a href="#">Submenu D</a></li> <li><a href="#">Submenu E</a></li> <li><a href="#">Submenu F</a></li> </ul> </li> <span id="s2"></span> <li class="subs"><a href="#s2">Menu 2</a> <ul> <li><a href="#">Submenu G</a></li> <li><a href="#">Submenu H</a></li> <li><a href="#">Submenu I</a></li> <li><a href="#">Submenu J</a></li> <li><a href="#">Submenu K</a></li> <li><a href="#">Submenu L</a></li> </ul> </li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="//www.script-tutorials.com/facebook-like-menu-responsive/">Back to Responsive menu tutorial</a></li> </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 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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
/* прочие элементы */ #nav span { display: none; } /* адаптивные правила */ @media all and (max-width : 980px) { /* элементы верхнего уровня */ #nav { height: auto; margin: 0; overflow: hidden; padding: 0; width: 100%; } #nav li { display: inline; float: left; height: auto; line-height: 40px; margin: 0; padding: 0; position: relative; width: 100%; } #nav > li:after { display: none; } #nav > li > a { border-bottom: 1px solid #3B5998; height: 40px; line-height: 40px; margin: 0; } #nav > li:hover > a, #nav > a:hover { margin: 0; border-width: 1px; } #nav > li.subs:hover > a { border-radius: 0; border-width: 1px; } /* подменю */ #nav ul { border: 0; left: 0; margin: 0; overflow: hidden; padding: 0; position: relative; top: 0; } #nav li:hover ul { display: none; } #nav ul li a { height: 40px; line-height: 40px; } #nav #s1:target + li > a, #nav #s2:target + li > a{ background-color: #FFFFFF; border: 0; color: #000000; text-shadow: 0 0 transparent; } #nav #s1:target + li ul, #nav #s2:target + li ul { display: block; } } |
Это означает, что при достаточно малом экране меню конвертируется в вертикальное, с возможностью открывать подменю, щелкая на его родительские элементы. Второе меню тоже, наконец, готово.
Заключение
Только что мы создали два различных (по логике) адаптивных меню, которые смотрятся как меню в facebook’е* (те же синие цвета и стили). Я уверен, что вам оно очень пригодится. Удачи и добро пожаловать к нам обратно!
Автор: Andrew
Источник: //www.script-tutorials.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
Комментарии (1)