Главная > Меню и Навигация > Разработка адаптивной навигации
Разработка адаптивной навигации13 августа 2012, 11:50. Разместил: Design FactoRy |
Самый сложный этап в разработке адаптивного веб-сайта, пожалуй, заключается в разработке навигации по сайту – это очень важная часть в дизайне сайта, так как именно посредством этого люди попадают на разные страницы сайта. Существует несколько способов разработки адаптивных навигационных меню, и уже сегодня доступны многие jQuery-плагины, которые решают эту проблему буквально за секунды. Тем не менее, вместо того чтобы применять готовое решение, сегодня мы хотим рассмотреть процесс разработки простенького навигационного меню с нуля при помощи CSS3 media queries и немного jQuery для того, чтобы оно корректно отображалось на экранах смартфонов. Демо | Скачать исходные материалы Внимание! У вас нет прав для просмотра скрытого текста. Давайте приступим. HTML Прежде всего, давайте добавим мета-тэг viewport внутрь тэга head. Этот тэг необходим для того, чтобы наши страницы правильно изменялись в размере и подстраивались под любой размер экрана, а точнее – под размер экрана мобильного устройства.
…а затем добавляем следующий отрывок кода в качестве разметки навигационного меню внутрь тэга body.
Как вы можете видеть выше, у нас есть 6 основных ссылок меню и дополнительная ссылка после блока ссылок. Эта дополнительная ссылка будет использоваться для открытия меню, когда оно будет скрыто на маленьких экранах. Стили В данном разделе мы займемся оформлением навигации. Здесь стили выполняют лишь декоративную функцию, поэтому вы можете выбирать любые понравившиеся вам цвета. Но в данном случае, нам нужно, чтобы тело документа было оформлено мягким кремовым цветом.
Тэг nav, который определяет навигацию, будет иметь 100% ширины в окне браузера, а ul, в котором содержатся основные ссылки нашего меню, будет иметь 600 пикселей ширины.
Далее мы выровняем ссылки меню по левому краю, чтобы они были отображены горизонтально одна за другой, но выравнивание элемента также вызовет коллапс их родительского элемента.
Как вы, возможно, заметили в HTML-разметке, приведенной выше, мы уже добавили clearfix в атрибут класса как для nav, так и для ul, чтобы очистить все окружающие элементы при выравнивании элементов внутри них при помощи хака CSS clearfix. Так что, давайте добавим следующие правила оформления в каскадные таблицы стилей.
Так как у нас есть 6 ссылок меню, и мы указали 600 пикселей ширины для контейнера, на каждую ссылку придется по 100 пикселей ширины.
Ссылки меню будут разделены границей толщиной в 1 пиксель, за исключением последней. Вспомните наше предыдущее руководство о модальных блоках, ширина меню будет увеличена на 1 пиксель, что сделает его ширину равной 101 пикселю из-за добавления границ, поэтому здесь мы поменяем модель box-sizing на border-box для того, чтобы меню сохраняло 100 пикселей ширины.
Далее, меню будет окрашиваться в более светлый цвет при статусах :hover или :active.
…и, наконец, дополнительная ссылка будет скрыта (только для экранов настольных ПК).
На данном этапе мы просто оформляем навигацию, и ничего не произойдет, если мы изменим размер окна браузера. Давайте переходить к следующему этапу. Media Queries CSS3 media queries используются для того, чтоб определить, каким образом будут выстраиваться стили в определенных breakpoint’ах или при использовании конкретных размеров экранов. Так как наше навигационное меню изначально имеет 600 пикселей ширины, мы сначала определим стили для режима просмотра при размере экрана от 600 и меньше пикселей. Говоря практическим языком, это будет наш первый breakpoint. При таком размере экрана, каждая вторая ссылка меню будет отображена следом за предыдущей, то есть ширина ul будет 100% от окна браузера, а ссылки меню будут занимать только 50%.
…а затем, мы также определяем, как навигация будет отображена, если размер экрана будет 480 и меньше пикселей (это будет наш второй breakpoint). При таком размере экрана дополнительная ссылка, которую мы добили ранее, будет видимой, и мы также зададим ссылке иконку «Menu» с правой стороны при помощи псевдо-элемента :after в то время, как основные ссылки меню будут скрыты для того, чтобы сэкономить вертикальное пространство на экране.
Наконец, когда размер экрана будет 320 и менее пикселей, меню будет отображено вертикально: сверху вниз.
Сейчас вы можете попробовать изменить размер окна браузера. Сейчас меню уже должно адаптироваться под размеры. Также советуем почитать: Media Queries для стандартных устройств Отображаем меню На данном этапе меню сохраняется скрытым, и будет видимым только после нажатия по ссылке «Menu». Этого эффекта можно достичь при помощи jQuery slideToggle().
Тем не менее, когда вы будете масштабировать окно браузера сразу после того, как показали меню, а затем скрыли его, меню тогда будет оставаться скрытым, так как jQuery генерирует стиль display: none и применяет его к элементу. Так что, нам нужно исключить этот стиль после масштабирования окна. Сделать это можно следующим образом:
Итак, это весь код, который нам был нужен. Теперь мы можем просматривать меню посредством ссылки. Мы рекомендуем вам всегда тестировать адаптивные дизайны с помощью инструментов вроде Responsinator, чтобы вы могли просматривать сразу несколько размеров. Вернуться назад |