responsivemenu-0

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

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

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

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

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

Пример

screenshot

HTML

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

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

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

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

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

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

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

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

Результаты

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

screenshot

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

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

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

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

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

screenshot

Стили меню

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

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

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

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

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

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

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

Результаты

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

screenshot

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

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

screenshot

Границы

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

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

screenshot

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

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

screenshot

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

1220px

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

screenshot

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

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

screenshot

930px

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

screenshot

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

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

screenshot

580px и 320px

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

screenshot

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

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

screenshot

Selectivizr

screenshot

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

Выводы

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

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


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

  1. Ребята, огромное спасибо за статью!

    Только помощь нужна =)

    Следуя вашему примеру, сделал такое меню:

    www.boomerang.dn.ua/tmp/html/index.html

    Работает и отображает, как задумал, но только на экране монитора.

    Попробовал на КПК (Win Mobile 6.1) и в Opera Mobile Emulator — там такой эффект:

    www.boomerang.dn.ua/tmp/html/wtf.png

    Перекопал кучу интернета и, видимо, недокопал.

    Пробовал добавить handheld в @media query: не помогло.

    Пожалуйста, помогите, люди добрые =)

    Thumb up 0 Thumb down 0

    • Максим, трудно вам ответить не имея на руках исходников. Нужно посмотреть на ваш код.

      Thumb up 0 Thumb down 0

      • Alex, вот еще любопытная деталь.

        Я скопировал коды из этой страницы: dabblet.com/gist/2030070

        И вставил их у себя в соответствующие файлы html и css.

        Результат получился с таким же эффектом, как и у меня: на мобильных устройствах и в Opera Mobile Emulator адаптивность потеряна. Как думаете, в чем пожет быть проблема?

        А архив — здесь: www.boomerang.dn.ua/tmp/sample.rar

        Thumb up 0 Thumb down 0

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

          Может быть это и влияет на адаптивность.

          Thumb up 0 Thumb down 0

          • Alex, большое спасибо за информацию! Я разобрался: в Opera Mini все отлично.

            Thumb up 0 Thumb down 0

Оставить комментарий