Сейчас существует множество вариантов горизонтальных меню для сайтов. Но, как правило, все они построены на основе неупорядоченного списка из ссылок, т.е. тегов <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); } |
Результат (открыть в новой вкладке):
Видеурок по теме создания горизонтальных меню
На самом деле это все рабочие, но довольно скучные с визуальной точки зрения, варианты горизонтальных меню. Их можно значительно украсить, если добавить больше стилей, анимацию и JavaScript. Примеры таких меню вы найдете ниже, но с кодом вам придется разобраться самостоятельно.
Примеры горизонтальных меню с анимацией
Варианты анимаций от Naoya
See the Pen animation nav bar by Naoya (@nxworld) on CodePen.
Подчеркивание ссылок, переезжающее при наведении от Naoya
See the Pen CSS slide underline by Naoya (@nxworld) on CodePen.
Сверкающий переход
Автор Aaron Iker
See the Pen Tab bar Animation by Aaron Iker (@aaroniker) on CodePen.
"Переезжающий" фон
Ryan Yu предлагает страницу с одинаковыми по принципу действия hover-эффектами и в меню, и в основном тексте. При наведении серый фон "переезжает" за курсовом мыши.
See the Pen Magic area on hover/focus by Ryan Yu (@iamryanyu) on CodePen.
Еще один "переезжающий" фон от Bogdan Blinnikov
See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.
Несколько горизонтальных меню с разными эффектами при наведении от Naoya
See the Pen Demo: using data attributes navigation by Naoya (@nxworld) on CodePen.
Адаптивное меню
Автор Julien Lepoivre
See the Pen Responsive Mobile Menu CSS/JS by Julien Lepoivre (@BigPepper) on CodePen.
И еще один вариант адаптивного меню с поиском.
See the Pen Responsive Menu by Elen (@ambassador) on CodePen.
Иконочные меню с анимацией
Автор Steve Gardner
See the Pen Sliding Icon Menu by Steve Gardner (@ste-vg) on CodePen.
Автор Envato Tuts+
See the Pen Exploring Hover Effects With Font Awesome Icons by Envato Tuts+ (@tutsplus)on CodePen.
Автор abxlfazl khxrshidi
See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl) on CodePen.
И вторая версия от того же автора:
See the Pen Animated Tab Bar v.2 by abxlfazl khxrshidi (@abxlfazl) on CodePen.
Отзывчивое меню в виде вкладок с иконками от Piyush га основе Bootstrap 4
See the Pen bootstrap 4 navbar by Piyush (@piyushpd139) on CodePen.
Меню для мобильной версии с забавными переходами от Milan Raring
See the Pen Tabbar animation by Milan Raring (@milanraring) on CodePen.
И второй вариант от того же автора:
See the Pen Tabbar animation - Only CSS by Milan Raring (@milanraring) on CodePen.
Адаптивное горизонтальное меню
Автор chris
See the Pen responsive dropdown menu by chris (@chrisl) on CodePen.
Переворот букв при наведении
Автор Envato Tuts+
See the Pen Exploring Letters Animation CSS Hover Effect by Envato Tuts+ (@tutsplus) on CodePen.
Вкладки
Автор jake
See the Pen No JS: Tabs that scale down to menu by jake (@jak_e) on CodePen.
Фиксированное меню с анимацией и прокруткой страницы
Вы можете как щелкать на элементах меню, так и прокручивать страницу - в любом случае вы будете переходить по блокам страницы. Автор Josetxu
See the Pen Sticky Nav with Smooth Scrolling and Progress Bar - CSS by Josetxu (@josetxu) on CodePen.
Выпадающие адаптивные меню
Данное меню от Kevin D основано на HTML/CSS и jQuery. Оно изменяет свой внешний вид для мобильных устройств.
See the Pen Responsive Menu by Kevin D (@wrecklaimer) on CodePen.
Несколько вариантов выпадающего меню с различными эффектами появления от Todd Synan.
See the Pen Nav Examples by Todd Synan (@toddsynan) on CodePen.
Вариант от Larry Geams Parangan
See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.
В коде ниже вы найдете способ создания выпадающего меню на HTML/CSS и немного на JS, который преобразует кнопку-гамбургер в крестик за счет смены класса.
See the Pen Responsive Dropdown Menu Bar by Elen (@ambassador) on CodePen.
На основе этого меню также можно создать мега-меню.
Больше примеров выпадающих меню ищите в отдельной статье.
Мега-меню для сайта
Мега-меню - это вид меню, при котором выпадает один большой блок, разделенный на столбцы с пунктами ссылок и картинками. Ниже вы найдете пример кода такого адаптивного меню. Перейдите на codepen.io, чтобы изменить размер экрана или щелкните на любой из вкладок.
See the Pen Responsive Mega Menu and Dropdown Menu (CSS only) by Elen (@ambassador) on CodePen.
Здравствуйте! А как установить стиль .navbar-inverse для горизонтального меню? Сам стиль описан на http://bootstrap-3.ru/
Это меню относится к стилям, описанным для фреймверка Bootstrap. О нем статей пока нет, но будут обязательно. А указать этот стиль можно в элементе nav:
<nav class="navbar navbar-inverse">
Смотрите документацию на официальном сайте Bootstrap или на сайте русской документации по Bootstrap-3.
Хотелось бы еще почитать про выпадающее меню на css
Будет чуть позже.