Вёрстка адаптивного навигационного меню

Меню навигации всегда были довольно простыми в создании. Сверстайте неупорядоченный список, установите float:left и готово. С адаптивным дизайном, который сейчас очень популярен, вы столкнётесь с некоторыми новыми трудностями.

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

Что мы создаём

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

Пример

HTML

Давайте отбросим лишние рассуждения и сразу перейдём к делу. Вы ведь хотите добраться до интересного материала?

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

Хотите верьте, хотите нет, но этот маленький кусочек кода доставил много хлопот, когда дело дошло до проверки. По непонятным причинам, стили просто не давали никакого эффекта в IE6-8! Наконец, через десять минут бесполезных попыток, нас осенило, что, были использованы элементы HTML5, которые, конечно же, не поддерживаются IE версии ниже 9.

К счастью, решение довольно просто, нужно только подключить известную библиотеку html5shiv (код нужно поместить в раздел head своего документа) и готово.

Добавляем список

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

Добавляем дополнительные теги

Чтобы сделать меню немного интереснее и информативнее, давайте добавим ещё одну строку текста под заголовком каждого элемента. Есть множество способов это сделать, и вы вполне можете пойти своим путем. Но мы добавили тег br и использовали элемент small для второй строки. Т.к. второй элемент действительно будет маленьким, у нас получится прекрасная семантическая разметка без лишних div’ов, ID или классов.

Результаты

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

Начальные стили

Начнём писать CSS. В первую очередь вспомним про старый добрый универсальный селектор и, воспользовавшись советом Пола Ириша (Paul Irish), применим box-sizing: border-box ко всем элементам. Это поможет нам легко устанавливать размер наших элементов в процентах, даже при том, что будем использовать borders.

Стили контейнера

Прежде чем мы перейдём к стилям отдельных элементов списка, применим некоторые базовые стили для родительских элементов. Во-первых, для элемента nav установим ширину на 90% от ширины body. Это растянет меню на достаточно большое пространство, но всё же оставит небольшой отступ вокруг него. Убедитесь, что центрировали его на странице с помощью margin:auto.

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

Стили меню

Теперь, когда родительские элементы работают правильно, самое время поработать с элементами меню, к которым мы можем обратиться через элемент nav вместе с тегами ссылок и элементов списка.

Здесь достаточно большой отрывок кода, но не пугайтесь, мы всё постепенно объясним.

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

Сначала идёт часть кода, определяющая форму и разметку каждого элемента списка. Мы изменили ссылки на элементы уровня блока, поставили float:left, определили ширину и добавили небольшой padding. Так мы получаем хороший большой прямоугольник для каждой ссылки в меню. Почему 12.5% для ширины? Потому что у нас восемь пунктов меню, а 100% / 8 даёт нам 12.5% ширины на каждый элемент.

Затем следует часть кода, отвечающая за визуальные стили блоков, которые мы создали. Мы даём им цвет фона и границу справа толщиной 1px.

Наконец, мы завершаем стили свойствами, отвечающими за текст меню. Здесь всё довольно просто, шрифт мы использовали “Cutive”, его вы можете найти здесь.

Для стилей small, мы изменили цвет, удалили text-transformation: uppercase и установили шрифт на Helvetica.

Результаты

Эти стили имеют достаточно большое значение. Теперь меню выглядит намного лучше. Пользовательский шрифт работает, ссылки расположены в одной строке, небольшой текст отображается отлично; всё очень красиво.

Стили при наведении

Когда пользователь проводит курсор мыши над элементом списка, мы изменим его цвет на чёрный. Чтобы это смотрелось ещё лучше, добавим плавный полусекундный переход.

Границы

Сейчас вы не можете это видеть, поскольку у нас белый фон, но на самом деле у нас есть проблема с границами (border). Мы использовали границы, чтобы разделить соседние элементы, поэтому у последнего элемента имеется ненужная нам граница. Чтобы это исправить, мы можем использовать псевдо-элемент last:child.

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

Адаптивность

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

Как видно, всё работает ужасно! Давайте попробуем использовать несколько media queries, чтобы посмотреть, сможем ли мы устранить эту проблему. Лучший способ узнать, где нам нужны media queries — просто открыть проект и посмотреть, где разметка ломается, а затем исправить это.

1220px

Первая проблема в нашем проекте возникает примерно при ширине 1200 пикселей. Здесь длинные строки текста начинают обрезаться и перестают быть полностью читабельными.

Чтобы это исправить, нам только нужно подогнать размер шрифта. Мы указали область непосредственно перед возникновением проблемы (1220px) и установили шрифт на 10px.

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

930px

Снова уменьшаем размер окна и находим, что разметка ломается при отметке 900px. Здесь у нас проблема с переполнением:

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

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

580px и 320px

Формат из двух строк работает хорошо до тех пор, пока мы не пересекаем черту в 600px, после чего теряются все разрывы. Разметка полностью разваливается.

Чтобы решить эту проблему, мы завершаем наши media queries форматом меню из двух колонок и четырёх строк. Эту разметку мы используем при ширине ниже 580px и уменьшаем размер шрифта на отметке 320px.

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

Selectivizr

Внимательные читатели заметят, что мы подстроились под старые версии IE с помощью html5shiv, чтобы селекторы псевдо-классов работали в IE. Кроме того, вам следует загрузить и подключить Selectivizr, удивительную JavaScript утилиту, построенную специально для использования CSS3 селекторов в IE6-8.

Выводы

Адаптивный дизайн — это не прогулка по парку. Все это отнимает время, требует от вас определённых усилий и знаний “know how”, которые нужно уметь эффективно осуществлять. Нам нравится разбивать обучение на отдельные части, например, меню навигации в этой статье или одна из прошлых статей Создание адаптивной галереи миниатюр, так вы можете досконально изучить весь процесс верстки.

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