Как сделать горизонтальное меню в html

Сохранив и открыв файл index.html в браузере мы увидим следующую картину:

Стилизация menu с помощью CSS

Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:

Для начала нам необходимо добавить голубой фон нашему меню и сделать внутренние отступы по вертикали и горизонтали, чтобы текст ссылок не прилипал к краям нашего блока с меню. Открываем файл style.css и записываем следующий код:

В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.

Далее убираем маркеры в виде точек у тега

, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.

nav ul

nav ul li < display: inline-block; margin-left: 10px; text-transform: uppercase; >nav ul li:first-child

А теперь немого приведем в порядок визуальное оформление горизонтального меню убрав нижнее подчеркивание и окрасим текст в белый цвет. Для этого тегу применим следующие CSS свойства:

В результате получим окончательный пример меню:

Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.

Горизонтальное меню

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

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

И еще один момент. Во всех примерах вам будет попадаться пункт меню с class= «current» (текущий), который не содержит ссылку. Он является демонстрационным и обозначает то, как должен выглядеть пункт меню, который соответствует той странице, на которой находится пользователь. Дело в том, что в интернете хорошим тоном считается отсутствие ссылок на странице, которые ссылаются на нее саму и, кстати, об этом же говорят представители поисковиков (Яндекс, Google и т.д.).

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

Самое простое горизонтальное меню без каких-либо изысков.

Пример HTML и CSS: простое горизонтальное меню

Описание примера

1. Создаем маркированный список (тег ), в который помещаем HTML-ссылки (тег ). Убираем у этого списка и у его пунктов маркеры (CSS list-style), а также внешние поля (CSS margin) и внутренние отступы (CSS padding).
2. Чтобы теги выстроились по горизонтали — делаем их встроенными (inline) с помощью свойства CSS display:inline.
3. Так как элементы списка у нас теперь уровня строки, то мы легко их можем выравнивать по левому или правому краю блока, используя CSS text-align.

Расположить элементы меню в одну строку и выровнять их можно и другим способом — заменив последние два пункта описания на свойство CSS float со значением left или right . Но здесь надо понимать, что при значении left элементы примут правильный порядок, а вот при right (как надо в нашем примере) они примут обратный порядок и придется менять местами ссылки.

Блочное горизонтальное меню (float)

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

Пример HTML и CSS: блочное горизонтальное меню с float

Описание примера

1. С помощью свойства CSS float:left выстраиваем элементы списка по горизонтали и добавляем каждому из них правое поле (CSS margin-right), чтобы они не прилегали друг к другу.
2. Делаем из ссылок встроенные блоки (CSS display:inline-block), чтобы при необходимости у них можно было изменять размеры. В конце задаем всем элементам горизонтального меню необходимое оформление.

Так как пункты меню у нас всплывают влево, то HTML-элементы, которые будут находиться ниже навигации, смогут также ее обтечь. Чтобы этого не произошло, можно сделать прерывание обтекания с помощью свойства CSS clear или установить у блока с class= «menu» такую высоту, которая гарантированно будет больше высоты ссылок.

Блочное горизонтальное меню (display)

Сделаем еще одно блочное меню, но немного другим способом.

Пример HTML и CSS: блочное горизонтальное меню с display

Описание примера

1. Для выстраивания пунктов меню в горизонтальную строку снова применяем display:inline. Это впоследствии позволяет нам выровнять элементы списка по центру.
2. Ну а ссылки и тег с class= «current» преобразуем во встроенные блоки, чтобы у них можно было явно указывать и изменять ширину (CSS width) и высоту (CSS height), если потребуется.
3. Задаем всем элементам необходимое оформление в виде рамок, цвета текста, фона и т.д.

И все бы хорошо, но IE6 и IE7 нам как всегда доставляют проблемы, так как не понимают значение inline-block для тегов . Поэтому будем их лечить с помощью условных комментариев и expression.

1. Да, старички IE не признают inline-block для блочных и подобных им элементов, но зато они прекрасно понимают это значение для встроенных тегов, к которым, например, относится тег . Поэтому интегрируем внутрь элемента с
2. один такой тег, которому и задаем нужные стили. Но перед этим обнуляем все стили у самого «current» , чтобы не было дублирования. Обнуление делаем до значений, которые используются по умолчанию либо просто нейтрализуем их (например, делаем нулевой размер рамки). То есть получается, что мы от «current» перенесли все стили в .
3. Немного о том, как работает этот expression. Он интегрирует внутрь заданного HTML-элемента любой код или текст, при этом часть, которая указывается после первого innerHTML , добавляется сразу после открывающего тега, а часть после второго innerHTML — в самый конец элемента. Вот и получается, что в нашем случае, мы добавили тег таким образом, что внутри него оказался текст «Ссылка 2».

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

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

Пример HTML и CSS: блочное горизонтальное меню с вкладками

Описание примера

Этот пример похож на предыдущий, поэтому рассмотрим только отличия.

1. Оставляем у основного блока нашего горизонтального меню только нижнюю границу рамки (CSS border-bottom), а также изменяем внутренние отступы (CSS padding) таким образом, чтобы элементы списка прижались к этой границе. В этот раз мы не будем выравнивать пункты меню по какой-либо из сторон или по центру, а просто зададим большой левый отступ у основного блока, чтобы он немного отодвинул их от края.
2. В результате действий первого этапа, наши пункты меню, а, следовательно, и ссылки прижались к нижней границе основного блока. Однако нам надо, чтобы они не просто прижались, а произошло наложение нижних частей рамок ссылок на эту границу. Для этого задаем элементам списка относительное позиционирование (CSS position:relative) и смещаем их вниз на расстояние равное толщине рамок (у нас это 2px). Смещение делаем с помощью свойства CSS bottom.
3. Для элемента «current» и ссылок в момент наведения на них курсора мыши (CSS :hover) переопределяем цвет нижней границы рамки (CSS border-bottom-color) и делаем его таким же, как и фон этих элементов. Так мы скроем нижнюю границу в местах наложения ссылок и получим эффект вкладок.

Разделы сайта

• Как сделать сайт
  Самому и бесплатно
• Учебник HTML
  Для начинающих
• Учебник CSS
  Для новичков
• Справочники
  По HTML и CSS
• Примеры
  HTML и CSS
• Ссылки
  Полезные сайты для вебмастеров
• Инструментарий
  Программы для создания сайтов

• Общая верстка
• CSS хаки для браузеров
• Макеты сайтов
• Навигация

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

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Горизонтальное выпадающее меню

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

Как сделать горизонтальное выпадающее меню

• Содержание:
• 1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
• 2. 3D выпадающее меню
• 3. Разворачивающееся выпадающее меню с логотипом
• 4. Увеличивающееся выпадающее меню
• 5. Подъезжающее выпадающее меню

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li ;
— для выпадающего меню ul , а также значения left и top .

Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

Способ 1.

Выпадающее меню скрывается с помощью .submenu , при наведении показывается с помощью .topmenu li:hover .submenu .

Способ 2.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu .

Способ 3.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

Способ 4.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu , т.е. из верхнего левого угла.

Способ 5. С помощью jQuery

$(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has('.submenu')").hover( function() < $(".five li ul").stop().fadeToggle(300);>/* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */ );

2. 3D выпадающее меню

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

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

* < box-sizing: border-box; >body < margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; >nav ul < list-style: none; margin: 0; padding: 0; >nav a < display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; >.topmenu < backface-visibility: hidden; background: rgba(255,255,255,.8); >.topmenu > li < display: inline-block; position: relative; >.topmenu > li > a < font-family: 'Exo 2', sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; >.down:after < content: "\f107"; margin-left: 8px; font-family: FontAwesome; >.topmenu li a:hover < color: #E6855F; >.submenu < background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; >.topmenu > li:hover .submenu < visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); >.submenu li a

3. Разворачивающееся выпадающее меню с логотипом

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

* < box-sizing: border-box; >body < margin: 0; background: #f2f2f2; >header < background: white; text-align: center; >header a < text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; >.logo < color: #D5B45B; font-family: 'Playfair Display', serif; font-size: 2.5em; padding: 20px 0; >nav < display: table; margin: 0 auto; >nav ul < list-style: none; margin: 0; padding: 0; >.topmenu:after < content: ""; display: table; clear: both; >.topmenu > li < width: 25%; float: left; position: relative; font-family: 'Open Sans', sans-serif; >.topmenu > li > a < text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; >.topmenu li a:hover < color: #D5B45B; >.submenu-link:after < content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; >.submenu < background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; >.submenu a < color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); >.submenu li:last-child a < border-bottom: none; >.topmenu > li:hover .submenu

4. Увеличивающееся выпадающее меню

Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu , при наведении размер увеличивается до .topmenu > li:hover .submenu .

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 600 пикселей, то есть, если разрешение экрана больше 600 пикселей, меню будет горизонтальным, если меньше — то вертикальным.

* < box-sizing: border-box; margin: 0; padding: 0; >body < background: url(https://html5book.ru/wp-content/uploads/2021/04/background_54.png) >ul < list-style: none; >.topmenu < background: white; >.topmenu a < text-decoration: none; display: block; transition: .4s ease-in-out; >.topmenu>li>a < padding: 20px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: 'Exo 2', sans-serif; >.topmenu li a:hover < color: #c0a97a; >.submenu li a < border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: 'Kurale', serif; >@media(max-width: 599px) < .topmenu>li>a < padding: 15px 20px; >.submenu li a < padding: 10px 20px; margin: 0 20px; >> @media(min-width: 600px) < .topmenu < width: 100%; display: flex; justify-content: center; >.topmenu>li < position: relative; >.topmenu>li:after < content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 24px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); >.topmenu>li:last-child:after < background: none; box-shadow: none; >.submenu < position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; >.topmenu>li:hover .submenu < visibility: visible; opacity: 1; transform: scale(1); >.submenu li a < text-align: center; padding: 10px 0; margin: 0 10px; >>

5. Подъезжающее выпадающее меню

Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Libre+Baskerville'); body < margin: 0; background-image: url(https://html5book.ru/wp-content/uploads/2017/03/dulcineia-dias-195000.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; >body:before < content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8)); >nav < text-align: center; padding: 40px 0 0; >nav ul < list-style: none; margin: 0; padding: 0; >nav a < text-decoration: none; display: block; color: #222; >.topmenu > li < display: inline-block; position: relative; >.topmenu > li > a < position: relative; padding: 10px 15px; font-family: 'Kaushan Script', cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; >.topmenu > li > a:before < content: ""; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; >.topmenu li:hover a:before < transform: translate(-50%, 0); opacity: 1; >.submenu < position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s; >.topmenu > li:hover .submenu < visibility: visible; opacity: 1; transform: translate(-50%, 0); >.submenu a < font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; >.submenu a:hover