Как правильно сверстать меню

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

Меню может выглядеть по разному. Может быть горизонтальным

…вертикальным

…многоуровневыми

…содержащими пиктограммки

…меню может быть очень разнообразным и сверстать его можно очень по разному: таблицами, блоками, просто сcылками, возможно ссылками с <br / >…можно придумать массу «извращенных» способов и большинство из них будут соответствовать принципам блочной (бестабличной) верстки. Но в профессиональных кругах почему-то считается, что навигация должна быть на основе неупорядоченных списков — теги <ul> и <li>.

Почему в навигации следует использовать ul?

Первое объяснение приходит, если просто логически подумать: меню — это перечень ссылок (разделов). А если не просто подумать, а заглянуть в словарь, например Ожегова:

1. Перечень — Перечисление кого- чего-нибудь по порядку
2. Перечень — Список с таким перечислением

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

Если мучают сомнения, обратимся за помощью к авторитетам. W3C о списках:

Списки могут содержать:

• не упорядоченный перечень
• упорядоченный перечень
• навигацию
• определения

Был еще такой тег <menu>, специально предназначенный для построения меню. Но сейчас он запрещен и сами отцы веб стандартов настоятельно рекомендуют вместо <menu> использовать <ul>. По крайней мере пока не оживет HTML5, списки — самый подходящий элемент для навигации.

Как использовать списки для построения навигации?

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

Отчаиваться не стоит, стоит учиться. CSS способно творить чудеса.

Пойдем по пути от простого к сложному.

Простое горизонтальное меню

<ul class="navigation">
	<li><a href="#">Главная</a></li>
	<li><a href="#">HTML и CSS приемы</a></li>
	<li><a href="#">Обучение</a></li>
	<li><a href="#">HTML справочник</a></li>
</ul>

Если у тебя пункты меню являются обычными ссылками (как на mpbox.ru), тогда достаточно просто избавиться от маркеров и выстроить пункты в один ряд.

.navigation {
	list-style: none; /* прячем маркеры */
}
.navigation li {
	display: inline; /* выстраиваем элементы списка в один ряд */
	margin-right: 15px; /* делаем отступ чтобы пункты меню не сливались */
}

Демо пример. Кстати о маркерах, не припомню ни одного меню, где бы они использовались. Вывод — придется часто прятать маркеры и я бы рекомендовал выносить их устранение в reset.css. Для тех кто не в курсе, list-style задает вид маркера, а так же позволяет его скрыть.

По умолчанию элементы списка (<li>) являются… элементами спискаdisplay: list-item. А каждый такой элемент начинается с новой строки. Чтобы это исправить, меняем отображение элемента на строчный (display: inline).

Заметка

Можно конечно выстроить в одну строку элементы списка еще несколькими способами (например, с помощью float: left или display: inline-block), но другие способы усложняют жизнь когда дело касается вопросов кроссбраузерности. Самый простой и предсказуемый способ выстроить элементы в один ряд — display: inline.

Горизонтальное меню с ссылками в виде блоков

<ul class="navigation">
	<li><a href="#">Главная</a></li>
	<li><a href="#">HTML и CSS приемы</a></li>
	<li><a href="#">Обучение</a></li>
	<li><a href="#">HTML справочник</a></li>
</ul>

HTML оставляем без измененений, а CSS немного усложниться:

.navigation {
	list-style: none; /* прячем маркеры */
}
.navigation li {
	float: left; /* выстраиваем элементы списка в один ряд */
	margin-right: 15px; /* делаем отступ чтобы пункты меню не сливались */
}
.navigation li a {
	display: block; /* меняем отображение на блок, чтобы иметь возможность задавать внутренние отступы */
	padding: 3px 5px;
	background: #ccc;
	color: #000;
	position: relative; /* для IE6, чтобы ссылка была кликабильной по всей своей площади */
}
.navigation li a:hover {
	background: #999;
	color: #fff;
}

Демо пример. В данном примере выстраиваем меню вряд используя float, при этом не стоит забывать, что теперь следующие за меню (<ul>) элементы, будут пытаться его обтекать. Это можно устранить используя clearfix или любой другой способ обновления потока.

Верстка вертикального меню

<ul class="navigation">
	<li><a href="#">Главная</a></li>
	<li><a href="#">HTML и CSS приемы</a></li>
	<li><a href="#">Обучение</a></li>
	<li><a href="#">HTML справочник</a></li>
</ul>

HTML оставляем тот же. Работаем только с CSS:

.navigation {
	list-style: none; /* прячем маркеры */
	width: 200px; /* ограничиваем ширину меню */
}
.navigation li {
	margin-bottom: 5px; /* делаем отступ чтобы пункты меню не сливались */
	zoom: 1; /* чтобы в IE отступ между пуктами был как у всех браузеров */
}
.navigation li a {
	display: block; /* меняем отображение на блок, чтобы иметь возможность задавать внутренние отступы */
	padding: 3px 5px;
	background: #ccc;
	color: #000;
	position: relative; /* для IE6, чтобы ссылка была кликабильной по всей своей площади */
}
.navigation li a:hover {
	background: #999;
	color: #fff;
}

Демо пример.

Меню с картинками

<ul class="navigation">
	<li class="chrysler"><a href="#">Chrysler</a></li>
	<li class="audi"><a href="#">Audi</a></li>
	<li class="bugatti"><a href="#">Bugatti</a></li>
</ul>

.navigation {
	list-style: none; /* прячем маркеры */
	margin: 30px;
}
.navigation li {
	float: left; /* выстраиваем элементы списка в один ряд */
	margin-right: 15px; /* делаем отступ чтобы пункты меню не сливались */
}
.navigation li a {
	display: block;
	text-align: center;
	padding-top: 100px; /* внутренний остту чтобы текст был вне фона */
	color: #ff0000;
	background-position: center top; /* выравниваем фон вверх и по центру */
	background-repeat: no-repeat;
	width: 200px; /* размеры указываем чтобы картинки полностью отобразились */
	height: 50px;
}
* html .navigation li a { /* хак для IE6, который иначе трактует блочную модель */
	height: 150px;
}
.navigation .chrysler a {
	background-image: url(path-to/menu-chrysler.jpg);
}
.navigation .audi a {
	background-image: url(path-to/menu-audi.jpg);
}
.navigation .bugatti a {
	background-image: url(path-to/menu-bugatti.jpg);
}
.navigation li a:hover {
	color: #0000CC;
}

Демо пример. Данную задачу можно реализовать разными способами. Прем, приведенный в этом примере, на мой взгляд самый простой, часто им пользуюсь. Обрати внимание, что в меню кликабилен не только текст ссылки, но и сама картинка. И при этом используется минимум элементов — еще раз подтверждает, что CSS это мощь.

Примеры проверены в:

• IE 6-8
• Firefox 2-3
• Opera 9.5
• Chrome 1
• Safari 3.1

Ложка дёгтя

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

Заметка

Меню, которое нельзя реализовать на списках, встречается крайне редко.

Выводы

• меню следует верстать используя списки
• меню практически любой сложности и вида можно реализовать на <ul>
• если встретилось меню, которое нереально сверстать списками, не страшно, если будет сделано на чем-то другом

Материалы

• W3C recomendation :: Unordered lists
• Eric Meyer :: примеры оформления меню

По теме

• Выпадающее меню с помощью CSS
• Выравнивание горизонтального меню по середине
• Выравнивание навигации из блоков по центру