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

Для создания адаптивной навигации по сайту существует множество путей, и несколько jQuery плагинов даже способны сделать это мгновенно .

Однако вместо того, чтобы применить готовое решение, в этом уроке мы пройдем через процесс построение простой навигации с нуля, используя CSS3 media queries и немного , чтобы правильно показать это на экране маленького размера, как у смартфона.

Итак, начнем.

HTML

Стили

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

Body { background-color : #ece8e5 ; }

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

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 ; }

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

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

Если Вы заметили из разметки html выше, мы уже добавили clearfix в свойство class для nav и ul, чтобы расчистить место, когда мы разместим “плавающие” элементы внутри него, используя CSS clearfix hack . Итак, добавим следующие правила стилей в таблицу стилей.

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

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

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

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

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 ; }

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

Nav a#pull { display : none ; }

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

Media Queries

Вывод меню

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

$(function() { var pull = $("#pull" ) ; menu = $("nav ul" ) ; menuHeight = menu.height () ; $(pull) .on ("click" , function(e) { e.preventDefault () ; menu.slideToggle () ; } ) ; } ) ;

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

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

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

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

Бонус: альтернативный способ

Как было ранее упомянуто в уроке, есть и другие способы сделать это, и использование JavaScript библиотеки SelectNav.js – один из простейших путей. Это чистый JavaScript, который не зависит от других сторонних библиотек, таких как jQuery.

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

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

Давайте начнем с иллюстрации типичной HTML структуры. Перед вами схема типичной навигационной панели, в которой присутствует несколько ссылок.

HTML код предельно прост: блок div и неупорядоченный список внутри. Как вы, возможно, знаете, спецификация HTML5 ввела новый элемент (nav), который идентифицирует навигационную панель. Тег nav заменяет общий тег div ,но, как вы можете видеть ниже, общая структура навигационной панели не меняется.

Организовать навигационную панель при помощи неупорядоченного списка (ul) всегда хорошая практика, особенно если вам требуется организовать более сложное взаимодействие между основными ссылками и подменю.

Перед вами пример HTML разметки навигационной панели с подменю.

Предложения по CSS

Сейчас давайте обратим внимание на три момента, которые сделают ваш CSS код лучше. Высота тега li должна быть равна высоте неупорядоченного списка (ul).

Для идеального вертикального выравнивания текста установите значение свойства line-height равным высоте тега ul .

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