Справочник фронт-энд девелопера: виды горизонтальных панелей навигации

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

Данная статья нацелена скорее на начинающих верстальщиков, но, может быть, матерые профессионалы тоже найдут в ней что-то новое или будут обращаться к ней как к справочнику.
Топик структурирован следующим образом: сначала ставится задача — описывается вид требуемого навигационного блока, затем рассматриваются приемы, позволяющие создать именно такую навигацию.
Подразумевается, что написание стилей ведется под семантически корректную структуру меню, которая выглядит примерно так:

<nav>
  <ul>
    <li><a href="index.html">Домой</a></li>
    <li><a href="shop.html">Сделать заказ</a></li>
    <li><a href="contacts.html">Обратная связь</a></li>
  </ul>
</nav>

При верстке под doctype, отличный от html5, элемент nav опускаем или заменяем на соответствующий div.

Что ж, начнем!..

Пункты меню, расположенные по правой/левой стороне

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

1. display: inline;
2. float: left/right;
3. display: inline-block.

Display: inline

Когда применяем
Данный способ целесообразно применять при верстке меню простого вида, в котором элементы представлены в виде отдельных слов, не имея padding'ов и разделены лишь пробелами между ними:

Живой пример

Blurtopia: ^[1]

Как делается
У элементов li в CSS нужно установить свойство display: inline. Кстати, это уберет и ненужные в большинстве меню такого вида маркеры, так как они находятся в дополнительных блоках, которые содержатся у элементов с display: list-item, а у inline'ов отсутствуют.
У ul устанавливаем свойство text-align в значение right или left соответсвенно.

Примечания

• При использовании этого варианта стоит помнить, что у inline элементов вертикальные margin'ы не учитываются, но горизонтальные работают;
• при необходимости верстки pixel perfect, есть вероятность столкновения с проблемой: в разных браузерах ширина пробела между элементами разная. Для решения проблемы расстояние между элементами выставляют margin'ами, а пробелы убирают ^[2];
• если подчеркивание в ссылках элементов меню сделать нижним border'ом, в современных браузерах можно получить красивое анимированное на :hover меню (JSFiddle ^[3]).

Float: left/right

Когда применяем
Когда необходимо сделать меню с элементами, имеющими padding'и и/или фиксированную высоту/ширину:

Живой пример

Таким способом сверстано верхнее меню НЛО ^[4]; более наглядный пример — Themeforest ^[5]:

Как делается
Устанавливаем float: left или float:right элементам li. Если нужно убрать маркеры, нужно добавить display: block или list-style: none.

Примечания

• Необходимо «очистить» ul, задав ему класс .clearfix или поместив в его конец элемент с clear: both, иначе у ul высота будет равна нулю; о других способах «очистки» float'ов можно прочитать здесь ^[6];
• пример интересного меню, сверстанного float'ами: html5guy ^[7].

Display: inline-block

Когда применяем
Задачи те же, что и при верстке с float. И да, при решении такой задачи inline-block пал в неравном бою. Во-первых, кроссбраузерность такого решения ниже, чем у float'a, а во-вторых, между inline-block'ами, как и между inline-элементами, появляются пробелы, зачастую ненужные. Эти проблемы решаемы, но зачем их создавать?

Как делается
Устанавливаем display: inline-block элементам li. Ну, а для IE7 (если вы его поддерживаете) прописываем *display:inline; *zoom: 1.

Симметричные относительно левой и правой сторон блоки навигации

В данном разделе рассмотрены навигационные блоки, расположенные симметрично. Существует несколько видов таких меню; каждому из них соответствует свой способ верстки:

1. пункты меню выровнены по центру;
2. пункты меню равномерно распределены по всей ширине, между элементами имеется промежуток;
3. пункты меню равномерно распределены по всей ширине, элементы заполняют всю ширину ul.

Пункты меню выровнены по центру

Когда применяем
Меню расположено по центру:

Живой пример

Rambler ^[8]:

Как делается
В зависимости от вида пунктов меню, устанавливаем display: inline или display: inline-block (если для пунктов меню предусмотрены padding'и задана ширина и/или высота) элементам li. Родителю (ul) устанавливаем text-align: center.

Примечания
Позволю себе повториться: иногда появляется необходимость в том, чтобы убрать пробелы между inline- и inline-block- элементами; 7 способов того, как это сделать, можно найти здесь ^[2].

Пункты меню равномерно распределены по всей ширине, между элементами имеется промежуток

Когда применяем
Пункты меню равномерно распределены по всей ширине, между отдельными пунктами имеются промежутки:

Живой пример

К сожалению, меню такого типа найти не удалось, поэтому здесь — пример с JSFiddle ^[9].

Как делается
В зависимости от вида пунктов меню, устанавливаем display: inline или display: inline-block элементам li. Родителю (ul) устанавливаем text-align: justify. Но сразу justify не заработает — нужно переполнить первую строку (если непонятно почему так — запускаем ворд и пытаемся растянуть несколько слов на всю ширину при помощи justify). Поэтому в конец элемента ul добавляем дополнительный элемент с display: inline-block и width: 100%, или, что лучше, псевдо-элемент ::after с такими же характеристиками.

Примечания
Помните, в предыдущих типах меню мы убирали пробелы между элементами со свойством display, установленным в inline и inline-block? Так вот, в этом случае так делать категорически нельзя — браузеру нужны промежутки между пунктами меню. Кстати, если убрать пробелы между некоторыми элементами, можно группировать кнопки (JSFiddle ^[10]):

Пункты меню равномерно распределены по всей ширине, элементы заполняют всю ширину ul.

Когда применяем
Между пунктами меню нет промежутков, любое количество пунктов меню занимает всю ширину:

Живой пример

Apple.com ^[11]:

Пример подобного меню на JSFiddle можно потрогать здесь ^[12].

Как делается
При решении данной задачи есть соблазн сверстать меню таблицами; но мы же не собираемся нарушать семантику документа, правда? Поэтому используем display: table-cell для li и display: table для ul; потом задаем ширину для ul
Если нужна поддержка старых браузеров, используем скрипт-полифилл ^[13], подменяющий такие блоки на таблицы для IE6 и IE7 или организуем fallback другими способами.

Примечания
При верстке меню данным способом нужно помнить, что нельзя размещать элементы с position: absolute относительно table-cell.

Почему?

Дело в том, что в спецификации w3c действие position: relative на table-cell не определено ^[14], поэтому в каждом браузере могут наблюдаться свои особенности.
Посмотрите этот пример ^[15] в разных браузерах (особо пристально смотрим на поведение Mozilla Firefox!).

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

Итог

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

Автор: everyonesdesign

Источник ^[16]