От автора: если вы когда-либо работали над адаптивным вебсайтом, вам, несомненно, приходилось биться над одной из самых коварных проблем этой развивающейся области: навигацией. Решение ее для простой навигации может быть прямолинейным. Однако если вы работаете над чем-то более сложным – возможно, с множественными вложенными списками и выпадающими меню – может оказаться уместной более кардинальная реконструкция.
При таком подходе к отзывчивой навигации мы собираемся применить методику, которая способна обеспечивать большие, многоуровневые навигационные меню с помощью медиазапросов и jQuery, при этом попытаемся сохранить простую разметку и минимизировать внешние ресурсы.
Тема: адаптивный веб-дизайн
Сложность: продвинутая
Примерное время выполнения: 30 мин.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Вот то, к чему мы стремимся:
На больших экранах показываем горизонтальное выпадающее меню, содержащее до двух уровней подменю, появляющихся, когда над родительским элементом проводят мышью.
На маленьких экранах – кнопку «Меню», которая отображает наше меню вертикально, показывая подменю при щелчке/касании родительского элемента.
Наша разметка – это довольно простой неупорядоченный список с вложенными в его элементы списками. Я намеренно не применяю к элементам никаких классов или ID, кроме исходного неупорядоченного списка, с тем, чтобы меню было совместимо с меню, созданными в CMS.
| 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 | <div class=»container»> <aclass=»toggleMenu»href=»#»>Menu</a> <ul class=»nav»> <li class=»test»> <ahref=»#»>Shoes</a> <ul> <li> <ahref=»#»>Womens</a> <ul> <li><ahref=»#»>Sandals</a></li> <li><ahref=»#»>Sneakers</a></li> <li><ahref=»#»>Wedges</a></li> <li><ahref=»#»>Heels</a></li> <li><ahref=»#»>Loafers</a></li> <li><ahref=»#»>Flats</a></li> </ul> </li> <li> <ahref=»#»>Mens</a> <ul> <li><ahref=»#»>Loafers</a></li> <li><ahref=»#»>Sneakers</a></li> <li><ahref=»#»>Formal</a></li> </ul> </li> </ul> </li> |
Давайте добавим несколько общих стилей, чтобы наш список смотрелся навигационной панелью:
| 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 | body,nav,ul,li,a {margin:0;padding:0;} body{font-family:»Helvetica Neue»,Helvetica,Arial,sans-serif;} a{text-decoration:none;} .container{ width:90%; max-width:900px; margin:10pxauto; } .toggleMenu{ display: none; background:#666; padding:10px15px; color:#fff; } .nav{ list-style:none; *zoom:1; background:#175e4c; position:relative; } .nav:before, .nav:after{ content:» «; display:table; } .nav:after{ clear:both; } .nav ul{ list-style:none; width:9em; } .nava{ padding:10px15px; color:#fff; *zoom:1; } .nav>li{ float:left; border-top:1pxsolid#104336; z-index:200; } .nav>li>a{ display:block; } .nav liul{ position:absolute; left:-9999px; z-index:100; } .nav lilia{ display:block; background:#1d7a62; position:relative; z-index:100; border-top:1pxsolid#175e4c; } .nav lililia{ background:#249578; z-index:200; border-top:1pxsolid#1d7a62; } |
Мы всего лишь выстроили элементы списка в горизонтальную линию, установили некоторые цвета и скрыли с экрана подменю с помощью абсолютного позиционирования. Если вас удивила строка 20, то это простой метод clearfix, который в таких ситуациях я считаю эффективным (прочтите об этом в блоге Николаса Галлахера (Nicolas Gallagher).
Далее выполним горизонтальные выпадающие меню. Хотя их можно сделать с помощью одного лишь псевдоселектора CSS :hover, я хочу добавить его с помощью JavaScript’а, так как в малоэкранной версии мы собираемся активировать переключение меню щелчком.
Так как для удаления подменю с экрана мы применяем абсолютное позиционирование, давайте добавим несколько правил .hover, которые в присутствии класса .hover определят местоположение подменю относительно их родительских элементов (о чем мы позаботимся с помощью jQuery).
| .nav li{ position:relative; } .nav>li.hover>ul{ left:0; } .nav li li.hover ul{ left:100%; top:0; } |
Теперь напишем пару строк простого jQuery, чтобы добавлять класс .hover к элементам списка, когда над ними проводят мышью.
| $(document).ready(function(){ $(«.toggleMenu»).css(«display»,»none»); $(«.nav li»).hover(function(){ $(this).addClass(‘hover’); },function(){ $(this).removeClass(‘hover’); }); }); |
И вот у нас получилось функциональное многоуровневое выпадающее меню.
К сожалению, наше отличное горизонтальное выпадающее меню выглядит крошечным на экранах мобильных устройств, так что давайте обеспечим ему полное увеличение при загрузке нашей страницы на мобильных браузерах, добавив мета-тэг viewport.
| <meta name=»viewport»content=»width=device-width, initial-scale=1″> |
Конечно, теперь на мобильных устройствах наше выпадающее меню смотрится еще хуже, а большая его часть даже не подходит по размеру к экрану! Давайте добавим несколько медиазапросов, чтобы список под точкой прерывания был вертикальным списком. Точка прерывания определяется отметкой, на которой наше меню разделяется надвое, в моем случае это примерно 800px.
На точке прерывания мы удалим float и установим ширину элементов списка и неупорядоченных списков на width: 100%. Прямо сейчас при проведении над родительскими элементами их дочерние списки отображаются поверх находящихся ниже элементов. Нам было бы лучше, если бы сместились другие элементы списка верхнего уровня. Так что вместо изменения позиции left неупорядоченного списка, мы просто установим значение position на static.
| @media screen and(max-width:800px){ .nav>li{ float:none; } .nav ul{ display:block; width:100%; } .nav>li.hover>ul,.nav li li.hover ul{ position:static; } } |
Так как над сенсорным экраном невозможно провести мышью (пока что), мы собираемся создать код условия для проверки ширины окна, а затем написать код для установки событий click() и hover().
| $(document).ready(function(){ varww=document.body.clientWidth; if(ww<800){ $(«.toggleMenu»).css(«display»,»inline-block»); $(«.nav li a»).click(function(){ $(this).parent(«li»).toggleClass(‘hover’); }); }else{ $(«.toggleMenu»).css(«display»,»none»); $(«.nav li»).hover(function(){ $(this).addClass(‘hover’); },function(){ $(this).removeClass(‘hover’); }); } }); |
Для события щелчка click нам пришлось изменить целевой элемент с элемента списка на родительский, так как списки вложены и щелчок на один элемент списка может открыть и его «внучатые» элементы. Однако проблема здесь в том, что щелчок по тэгу-привязке перезагрузит страницу, а мы не можем предотвратить поведение по умолчанию всех тэгов-привязок, являющихся потомками элементов списка.
Чтобы исправить это, давайте внесем фрагмент jQuery, чтобы добавить класс .parent к любому элементу списка, у чьей дочерней привязки есть элементы одного уровня (сиблинги), затем целенаправленно обратимся только к этим привязкам (при этом пытаясь сохранить гибкость разметки).
| $(«.nav li a»).each(function(){ if($(this).next().length>0){ $(this).addClass(«parent»); }; }) if(ww<800){ $(«.toggleMenu»).css(«display»,»inline-block»); $(«.nav li a.parent»).click(function(e){ e.preventDefault(); $(this).parent(«li»).toggleClass(‘hover’); }); }else{ …} |
Теперь наше меню в мобильных устройствах смотрится довольно симпатично, но занимает довольно много ценной «недвижимости» экрана. Сейчас популярен новый подход – переключать списки навигации с помощью кнопки, обычно под названием «Меню» или иконки меню. Давайте сделаем так, чтобы ссылка-переключатель работала, показывая наш навигационный список, только когда на нее щелкают.
| $(«.toggleMenu»).click(function(e){ e.preventDefault(); $(«.nav»).toggle(); }); if(ww<800){ $(«.toggleMenu»).css(«display»,»inline-block»); $(«.nav»).hide(); }else{ … } |
Шаг 7: Еще немного стилей
Теперь, когда элементы родительского списка выбираются с помощью класса, почему бы не добавить маленькую указующую вниз стрелку, чтобы дать понять пользователям, у каких элементов списка есть дочерние элементы?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .nav>li>.parent{ background-position:95%50%; } .nav li li.parent{ background-image:url(«images/downArrow.png»); background-repeat:no-repeat; background-position:95%50%; } @media screen and(max-width:800px){ .nav>li>.parent{ background-position:95%50%; } .nav li li.parent{ background-image:url(«images/downArrow.png»); background-repeat:no-repeat; background-position:95%50%; } } |
Сейчас это меню работает довольно хорошо в практических целях. Если вы откроете его в мобильном браузера, то получите пригодный к употреблению вертикальный список-«аккордеон», если в браузера настольного компьютера – красивый горизонтальный выпадающий список. Однако, если изменить размер браузера настольного компьютера до ширины мобильного, наша навигация работает только при проведении мышью, а меню не скрывается при помощи свойства переключения toggle. Большинству приложений это подходит. В конце концов, ваш среднестатистический посетитель сайта не хватает свой браузер за краешек и не начинает бешено возить им туда-сюда.
Однако если захочется впечатлить своих приятелей – веб-профессионалов, так не пойдет. Нам придется установить свой скрипт так, чтобы он отвечал на событие resize, и реализовать код условия, когда размеры браузера изменяются ниже контрольной точки. Расширяя код, показанный в великолепном учебнике Создание адаптивного дизайна Mobile-First (Creating a Mobile-First Responsive Design ), мы установим несколько переменных, чтобы быть в курсе изменений и обновлять ширину своего браузера.
Так как нам нужно проверять ширину браузера как при загрузке страницы, так и при изменении размера браузера, давайте начнем с перемещения всего кода условия из события $(document).ready() и обертывания его в функцию adjustMenu.
| 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 | varww=document.body.clientWidth; $(document).ready(function(){ $(«.toggleMenu»).click(function(e){ e.preventDefault(); $(«.nav»).toggle(); }); $(«.nav li a»).each(function(){ if($(this).next().length>0){ $(this).addClass(«parent»); }; }) adjustMenu(); }); functionadjustMenu(){ if(ww<800){ $(«.toggleMenu»).css(«display»,»inline-block»); $(«.nav»).hide(); $(«.nav li a.parent»).click(function(e){ e.preventDefault(); $(this).parent(«li»).toggleClass(‘hover’); }); }else{ $(«.toggleMenu»).css(«display»,»none»); $(«.nav li»).hover(function(){ $(this).addClass(‘hover’); },function(){ $(this).removeClass(‘hover’); }); } } |
Для вызова этой функции при изменении размеров браузера мы собираемся привязать (bind) ее к событиям окна resize и orientationchange. Внутри этого события мы собираемся переопределять переменную ww, чтобы приспосабливать ее к новой ширине браузера.
| $(window).bind(‘resize orientationchange’,function(){ ww=document.body.clientWidth; adjustMenu(); }); |
На данный момент мы создали больше проблем: хотя вначале все, похоже, работает (горизонтальное меню сворачивается в кнопку «Меню», которая его открывает), быстро становится ясным, что у нас возникли два больших затруднения:
Меню исчезает полностью, если заново изменить мобильный размер окна после контрольной точки.
В мобильной версии все еще запускается событие проведения мышью hover.
Наше пропавшее навигационное меню, кажется, можно легко привести в порядок: просто добавить $(«nav»).show() при условии «больше, чем точка прерывания». Это решение кажется работающим, но создает коварные случаи. Так как код переоценивается при каждом изменении размеров браузера, всякий раз при изменении размера с открытым меню оно автоматически снова закрывается.
Это может казаться маловероятным, но мобильные браузеры – загадочные существа: например, в моем Galaxy S прокрутка вниз, а затем снова до верха страницы запускает событие изменения размера resize. Нехорошо!
Чтобы исправить это, нужно предусмотреть некий способ проверки того, щелкали ли на переключатель меню. Я собираюсь применить к кнопке переключения меню дополнительный класс, потому что это может оказаться удобным при назначении стилей (может быть, попозже нам понадобится стрелка-указатель сверху донизу?) Вдобавок к переключению дисплея навигационного меню кнопка меню будет теперь переключать свой собственный класс .active. При условии «уже, чем точка прерывания» давайте обновим код, чтобы навигационное меню скрывалось, только если у переключателя меню отсутствует класс .active.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(document).ready(function(){ $(«.toggleMenu»).click(function(e){ e.preventDefault(); $(this).toggleClass(«active»); $(«.nav»).toggle(); }); }); if(ww<800){ $(«.toggleMenu»).css(«display»,»inline-block»); if(!$(«.toggleMenu»).hasClass(«active»)){ $(«.nav»).hide(); }else{ $(«.nav»).show(); } $(«.nav li a.parent»).click(function(e){ e.preventDefault(); $(this).parent(«li»).toggleClass(‘hover’); }); }… |
Чтобы решить проблему отклика своего мобильного навигационного меню на события проведения мышью, нам просто придется отвязать unbind() событие проведения мышью от элементов списка внутри условия «уже, чем точка прерывания».
| $(«.nav li»).unbind(‘mouseenter mouseleave’); |
Однако так высвечивается новая проблема: события щелчка click не работают при изменении размера браузера с большего на меньший. Поиск ошибок показывает, что событие click было привязано к ссылке множество раз, так что при каждом щелчке включается и тут же снова выключается класс .hover. Это происходит из-за того, что вся функция неоднократно запускается при изменении размеров окна. Чтобы гарантировать, что переключение начнется там, где нужно, следует отвязать unbind событие щелчка перед тем, как снова привязать его.
Однако как только мы опять изменим размер браузера с меньшего на больший, нам станет не хватать события hover, потому что мы его отвязали, когда браузер был маленьким, а событие click все еще присутствует, так что отвяжем его перед привязкой состояния проведения мышью hover. Кроме того, мы собираемся удалить все элементы списка с классом .hover перед их добавлением обратно при событии проведения мышью, чтобы меню не оставались открытыми при изменении размера браузера на более широкий.
Ради ясности я заново записываю события .click() и .hover() с помощью .bind(). Это означает в точности то же.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | if(ww<800){ $(«.toggleMenu»).css(«display»,»inline-block»); if(!$(«.toggleMenu»).hasClass(«active»)){ $(«.nav»).hide(); }else{ $(«.nav»).show(); } $(«.nav li»).unbind(‘mouseenter mouseleave’); $(«.nav li a.parent»).unbind(«click»).bind(«click»,function(e){ e.preventDefault(); $(this).parent(«li»).toggleClass(‘hover’); }); }else{ $(«.toggleMenu»).css(«display»,»none»); $(«.nav»).show(); $(«.nav li»).removeClass(«hover»); $(«.nav li a»).unbind(«click»); $(«.nav li»).unbind(‘mouseenter mouseleave’).bind(‘mouseenter mouseleave’,function(){ $(this).toggleClass(‘hover’); }); } |
Ура! Кажется, все работает, как следует.
Вечеринка не состоится, если на нее не придет IE7, не так ли? У нас имеется странный баг – там, куда исчезают подменю, когда они демонстрируются поверх другого контента (в нашем примере текста lorem ipsum). Как только курсор доходит до элемента абзаца и – пффф! – меню уже нет. Я уверена, что это происходит из-за причудливости способа, которым IE7 управляется с position: relative;, и вопрос легко решается запуском hasLayout для элемента .nav a.
Как обычно, вам придется самим решать проблему поддержки браузера и свойств, но инструменты типа Modernizr и respond.js могут немного облегчить тяжесть поддержки старых браузеров.
Я протестировала это меню в Mobile Safari и каждом браузере Android 2.3, до которого только смогла добраться, и оно, похоже, работает довольно хорошо. Однако эта техника сильно зависима от JavaScript’а, а так как некоторые мобильные браузеры (в основном Blackberry) очень плохо поддерживают JavaScript, пользователи могут остаться с навигационным меню, которым невозможно пользоваться.
К счастью, существует множество методов, которые можно применить для обслуживания упрощенных разметок для устройств без JavaScript. На ум приходит старая добрая методика добавления класса .no-js к тэгу body и удаления его в своем JavaScript’е, но также можно предусмотреть атрибуты href для навигационных элементов верхнего уровня, отсылая, например, пользователей к общей категории «Обувь», и полагаясь на preventDefault для предупреждения такого поведения в устройствах, обеспеченных JavaScript’ом.
Конечно, медиазапросы не станут работать в старых версиях IE, так что вам придется решать, стоит ли включать «замазку»-polyfill, такую как respond.js для заполнения этого пробела.
И последнее, но не менее важное – досадный баг iOS, вызывающий изменение уровня увеличения при вращении устройства. Чтобы прибить этого «жучка», просмотрите скрипт настройки iOS Orientationchange.
В Unity используется производительный язык программирования C#. Благодаря C# и Mono – кроссплатформенной реализации .NET,…