Виды горизонтальных меню для сайта

Сейчас существует множество вариантов горизонтальных меню для сайтов. Но, как правило, все они построены на основе неупорядоченного списка из ссылок,  т.е. тегов <ul>, <li>, <a>. HTML5 подарил нам замечательный тег nav (от англ. navigation - навигация), в который обычно список ссылок помещается.

Поэтому базовой структурой для всех примеров ниже будет следующий код:

Меняться будет только атрибут id. И именно к нему будет привязано все основное форматирование меню.

Еще нам понадобится css-код, отвечающий за базовые css-правила:

Здесь мы задаем шрифт для body, а также ширину, отключаем отступы внешние (margin:0) и внутренние (padding:0) для элементов ul и li, задаем нижний отступ для ul и изменяем цвет ссылок (внимание!!!!) на белый. А это значит, что при обновлении страницы, если вы все делаете пошагово, ссылок вы НЕ УВИДИТЕ!!! Т.к. на белом фоне body белый цвет текста не читается. Зато чуть позже нам это пригодится.

Итак, начнем.

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

Для первого элемента ul задаем id="menu-horiz", т.е. горизонтальное меню. Сейчас наш блок ссылок пока еще является вертикальным. Но в CSS мы зададим для элементов li свойство display: inline-block - и сразу получим горизонтальное меню. Добавим стандартный синий цвет ссылкам и отступы для li. Вот что получилось:

Результат представлен ниже (открыть в новой вкладке):

Вариант 2. Горизонтальное меню с inline-block элементами

Во втором примере рассмотрим форматирование меню, очень похожего на первый вариант, но с фоном, изменяющимся при наведении на пункт меню. Для ul во втором случае зададим id="menu-bg". CSS:

Обратите внимание еще на один момент: здесь вертикальные отступы для пункта меню создавались не с помощью свойства padding, а с помощью высоты элемента (height: 40px) и такой же точно высоты для текста (line-height: 40px). За счет этого получилось, что текст расположился ровно посередине блока по вертикали.

Результат (открыть в новой вкладке):

Что получилось? Неплохое меню с одной неприятностью: при наведении на пункт меню фон меняется не для всего пункта. Остается примерно 5px с левой стороны предыдущего фона. В чем проблема? А в том, что строчно-блочные элементы (#menu-bg li { display: inline-block }) при расположении с новой строки оставляют после себя один пробельный отступ. Именно он и равен примерно 5px. И может увеличиваться/уменьшаться в зависимости от размера шрифта. Поэтому один из способов борьбы с этой неприятностью - дописать отрицательный правый внешний отступ (margin-right) для элементов li:

Смотрим на результат (открыть в новой вкладке):

Вариант 3. Еще одно меню с inline-block элементами

В этом варианте меню мы рассмотрим, как задавать стили не для элемента li, а для ссылки, вложенной в нее. И еще рассмотрим способ избавления от пробельного отступа для строчно-блочных элементов.

Для третьего меню будем использовать id="hover-menu". CSS правила для него:

Тут реализован следующий подход - для элементов li - display: inline-block, а для элементов a, т.е. ссылок - display: block. За счет этого ссылка (изначально строчный элемент, т.е. имеющий по умолчанию свойство dispaly: inline) занимает все доступное пространства родительского элемента, т.е. <li>.

Именно для ссылки здесь задаются отступы (padding: 10px) и правая граница (border-right ). В предыдущем варианте меню, напомню, эти свойства были заданы для li. И псевдокласс :hover тоже назначается для ссылки.

И еще один важный момент - мы будем бороться с отступами в li в этом меню очень простым и эффективным способом: просто уберем закрывающий тег </li>. Этот код является валидным и очень простым.

Еще о способах борьбы с отступами в строчно-блочных элементах вы можете познакомиться в этой статье.

Вот что получилось (открыть в новой вкладке):

Вариант 4. Горизонтальное меню с помощью свойств таблиц

Таблицы когда-то были основой для верстки сайтов. Но имели ряд недостатков, которые привели к отказу от табличной верстки. Тем не менее css-свойства таблиц, а именно display:table для родительского элемента (у нас это ul) в сочетании с display:table-cell для элемента дочернего (li в нашем меню). Id для четвертого списка будет menu-table. CSS:

Важно: по умолчанию таблица занимает столько места, сколько в ней существует контента (содержимого). А у нас немного текста в каждом элементе li. Поэтому для ul необходимо задать width: 100%, чтобы меню растянулось на всю ширину страницы (или родительского блока).

Результат (открыть в новой вкладке):

Вариант 5. Горизонтальное float-меню (с плавающими элементами)

Для этого меню мы зададим id="menu-float"  и запишем следующий css-код:

Делать это лучше последовательно, т.к. только в этом случае вы сможете увидеть все особенности этого подхода. Очень хорошо они видны в видеоуроке. Здесь же остановлюсь на том, что как только вы зададите элементам li свойство float:left, то столкнетесь с тем, что высота контейнера (элемента ul) станет равна 0, т.е. родительский элемент "схлопнется", и поэтому фонового цвета вы не увидите. Для того, чтобы это вернуть нужно записать для #menu-float {overflow: hidden} или воспользоваться методом clearfix:

Только выбирайте один из способов, пожалуйста.

Если вы хотите, чтобы все пункты меню были одинаковой ширины, то лучше воспользоваться функцией calc(), появившейся в CSS3 и позволяющей проводить вычисления для различных единиц измерений (в нашем случае это проценты и пиксели). Подробнее смотрите в видеоуроке ниже.

Результат (открыть в новой вкладке):

Скачать обобщенный пример.

Видеурок по теме создания горизонтальных меню