Сейчас существует множество вариантов горизонтальных меню для сайтов. Но, как правило, все они построены на основе неупорядоченного списка из ссылок, т.е. тегов <ul>, <li>, <a>. HTML5 подарил нам замечательный тег nav (от англ. navigation - навигация), в который обычно список ссылок помещается.
Поэтому базовой структурой для всех примеров ниже будет следующий код:
1 2 3 4 5 6 7 8 9 |
<nav> <ul id="some-id"> <li><a href="#">Главная</a></li> <li><a href="#">Телефоны</a></li> <li><a href="#">Телевизоры</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Доставка и оплата</a></li> </ul> </nav> |
Меняться будет только атрибут id. И именно к нему будет привязано все основное форматирование меню.
Еще нам понадобится css-код, отвечающий за базовые css-правила:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
body { font: 18px Calibri, Tahoma, sans-serif; width: 80%; margin: 20px auto; } nav ul, nav ul li { margin: 0; padding: 0; } nav ul { list-style-type: none; margin-bottom: 20px; } nav ul li a { text-decoration: none; color: #fff; } nav ul li a:hover { text-decoration: underline; } |
Здесь мы задаем шрифт для body, а также ширину, отключаем отступы внешние (margin:0) и внутренние (padding:0) для элементов ul и li, задаем нижний отступ для ul и изменяем цвет ссылок (внимание!!!!) на белый. А это значит, что при обновлении страницы, если вы все делаете пошагово, ссылок вы НЕ УВИДИТЕ!!! Т.к. на белом фоне body белый цвет текста не читается. Зато чуть позже нам это пригодится.
Итак, начнем.
Вариант 1. Простое горизонтальное меню
Для первого элемента ul задаем id="menu-horiz", т.е. горизонтальное меню. Сейчас наш блок ссылок пока еще является вертикальным. Но в CSS мы зададим для элементов li свойство display: inline-block - и сразу получим горизонтальное меню. Добавим стандартный синий цвет ссылкам и отступы для li. Вот что получилось:
1 2 3 4 5 6 7 |
#menu-horiz li { display: inline-block; padding: 3px 15px 3px 0; } #menu-horiz a { color: #00f; } |
Результат представлен ниже (открыть в новой вкладке):
Вариант 2. Горизонтальное меню с inline-block элементами
Во втором примере рассмотрим форматирование меню, очень похожего на первый вариант, но с фоном, изменяющимся при наведении на пункт меню. Для ul во втором случае зададим id="menu-bg". CSS:
1 2 3 4 5 6 7 8 9 10 11 |
#menu-bg { background: #1858be; } #menu-bg li { display: inline-block; height: 40px; line-height: 40px; padding: 0 10px; border-right: 1px solid #0c3474; } #menu-bg li:hover { background: #0c3474; } |
Обратите внимание еще на один момент: здесь вертикальные отступы для пункта меню создавались не с помощью свойства padding, а с помощью высоты элемента (height: 40px) и такой же точно высоты для текста (line-height: 40px). За счет этого получилось, что текст расположился ровно посередине блока по вертикали.
Результат (открыть в новой вкладке):
Что получилось? Неплохое меню с одной неприятностью: при наведении на пункт меню фон меняется не для всего пункта. Остается примерно 5px с левой стороны предыдущего фона. В чем проблема? А в том, что строчно-блочные элементы (#menu-bg li { display: inline-block }) при расположении с новой строки оставляют после себя один пробельный отступ. Именно он и равен примерно 5px. И может увеличиваться/уменьшаться в зависимости от размера шрифта. Поэтому один из способов борьбы с этой неприятностью - дописать отрицательный правый внешний отступ (margin-right) для элементов li:
1 2 3 4 |
#menu-bg li { ...; /* весь предыдущий код*/ margin-right: -.25em; } |
Смотрим на результат (открыть в новой вкладке):
Вариант 3. Еще одно меню с inline-block элементами
В этом варианте меню мы рассмотрим, как задавать стили не для элемента li, а для ссылки, вложенной в нее. И еще рассмотрим способ избавления от пробельного отступа для строчно-блочных элементов.
Для третьего меню будем использовать id="hover-menu". CSS правила для него:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#menu-hover { background: #3ca010; } #menu-hover li { display: inline-block; } #menu-hover li a { display: block; padding: 10px; border-right: 1px solid #1e4e09; } #menu-hover li a:hover { background: #77dd4a; } |
Тут реализован следующий подход - для элементов 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#menu-table { display: table; background: #dd0bc4; width: 100%; } #menu-table li { display: table-cell; padding: 10px; border-right: 1px solid #800571; text-align: center; } #menu-table li:hover { background: #800571; } |
Важно: по умолчанию таблица занимает столько места, сколько в ней существует контента (содержимого). А у нас немного текста в каждом элементе li. Поэтому для ul необходимо задать width: 100%, чтобы меню растянулось на всю ширину страницы (или родительского блока).
Результат (открыть в новой вкладке):
Вариант 5. Горизонтальное float-меню (с плавающими элементами)
Для этого меню мы зададим id="menu-float" и запишем следующий css-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#menu-float { background: #f90; } #menu-float li { float: left; padding: 10px; border-left: 1px solid #f40; text-align: center; } #menu-float li:hover { background: #f40 } |
Делать это лучше последовательно, т.к. только в этом случае вы сможете увидеть все особенности этого подхода. Очень хорошо они видны в видеоуроке. Здесь же остановлюсь на том, что как только вы зададите элементам li свойство float:left, то столкнетесь с тем, что высота контейнера (элемента ul) станет равна 0, т.е. родительский элемент "схлопнется", и поэтому фонового цвета вы не увидите. Для того, чтобы это вернуть нужно записать для #menu-float {overflow: hidden} или воспользоваться методом clearfix:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#menu-float { background: #f90; overflow:hidden; } или #menu-float { background: #f90; } #menu-float:after, #menu-float:before { content: ""; display: table; } #menu-float:after { clear: both; } |
Только выбирайте один из способов, пожалуйста.
Если вы хотите, чтобы все пункты меню были одинаковой ширины, то лучше воспользоваться функцией calc(), появившейся в CSS3 и позволяющей проводить вычисления для различных единиц измерений (в нашем случае это проценты и пиксели). Подробнее смотрите в видеоуроке ниже.
1 2 3 4 |
#menu-float li { ...; /*весь предыдущий код*/ width: calc(100%/5 - 21px); } |
Результат (открыть в новой вкладке):
Здравствуйте! А как установить стиль .navbar-inverse для горизонтального меню? Сам стиль описан на http://bootstrap-3.ru/
Это меню относится к стилям, описанным для фреймверка Bootstrap. О нем статей пока нет, но будут обязательно. А указать этот стиль можно в элементе nav:
<nav class="navbar navbar-inverse">
Смотрите документацию на официальном сайте Bootstrap или на сайте русской документации по Bootstrap-3.
Хотелось бы еще почитать про выпадающее меню на css
Будет чуть позже.