Горизонтальное меню
На этой странице находятся примеры для создания горизонтальных меню сайта с помощью HTML и CSS. Кроме того, что ссылки в этих меню располагаются по горизонтали, их объединяет еще одна особенность — текст внутри ссылок — это действительно текст, заключенный в тег <A>, а не изображения, где текст является частью картинки.
Обычной практикой является создание навигации на основе списков, поэтому здесь мы также рассмотрим именно эти варианты. Ради сокращения кода, в примерах не будут использоваться какие-то декоративные изыски вроде закругления углов, но вы должны помнить, что ссылки в CSS можно изменять очень многими способами. Поэтому, если требуется, можно с легкостью добавить в CSS-код необходимые стили, чтобы получить горизонтальное меню, которое вам необходимо.
И еще один момент. Во всех примерах вам будет попадаться пункт меню с class="current" (текущий), который не содержит ссылку. Он является демонстрационным и обозначает то, как должен выглядеть пункт меню, который соответствует той странице, на которой находится пользователь. Дело в том, что в интернете хорошим тоном считается отсутствие ссылок на странице, которые ссылаются на нее саму и, кстати, об этом же говорят представители поисковиков (Яндекс, Google и т.д.).
Простое горизонтальное меню
Самое простое горизонтальное меню без каких-либо изысков.
Пример HTML и CSS: простое горизонтальное меню
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание простого горизонтального меню</title>
<style type="text/css">
ul, li {
list-style: none; /* убираем маркеры списка */
margin: 0; /* обнуление полей */
padding: 0; /* обнуление отступов */
}
.menu {
text-align: right; /* в меню текст справа */
font-weight: bold; /* жирность шрифта */
border: 1px #f06 solid; /* стили рамки */
padding: 10px; /* внутренние отступы */
}
.menu li {
display: inline; /* делаем теги LI встроенными */
margin-left: 7px; /* левое поле */
}
.menu a {
color: #06f; /* цвет ссылок */
text-decoration: none; /* убираем подчеркивание */
}
.menu a:hover {
text-decoration: underline; /* добавляем подчеркивание при наведении курсора мыши */
}
.current {
color: #f06; /* цвет пункта для текущей страницы */
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Ссылка 1</a></li>
<li class="current">Ссылка 2</li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ul>
</body>
</html>Описание примера
Расположить элементы меню в одну строку и выровнять их можно и другим способом — заменив последние два пункта описания на свойство CSS float со значением left или right. Но здесь надо понимать, что при значении left элементы примут правильный порядок, а вот при right (как надо в нашем примере) они примут обратный порядок и придется менять местами ссылки.
Блочное горизонтальное меню (float)
В этом меню ссылки представляют собой блоки, у которых можно изменять ширину и высоту, если это необходимо.
Пример HTML и CSS: блочное горизонтальное меню с float
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание блочного горизонтального меню (float)</title>
<style type="text/css">
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.menu {
padding: 5px; /* внутренние отступы блока с меню */
}
.menu li {
float: left; /* элементы списка всплывают влево */
margin-right: 10px; /* правое поле */
}
.menu a {
display: inline-block; /* ссылки становятся встроенными блоками */
color: #fff; /* цвет текста ссылок */
background: #00c; /* их фон */
text-decoration: none; /* убираем подчеркивание */
text-align: center; /* текст по центру */
border: 2px #c00 solid; /* стили рамки */
padding: 5px; /* внутренние отступы */
}
.menu a:hover {
background: #c00; /* фон ссылок под курсором мыши */
border: 2px #00c solid; /* стили рамки */
}
.menu li.current {
color: #fff; /* цвет текста в пункте для текущей страницы */
background: #c00; /* цвет фона */
text-align: center; /* текст по центру */
border: 2px #00c solid; /* стили рамки */
padding: 5px; /* внутренние отступы */
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Ссылка 1</a></li>
<li class="current">Ссылка 2</li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ul>
</body>
</html>Описание примера
Так как пункты меню у нас всплывают влево, то HTML-элементы, которые будут находиться ниже навигации, смогут также ее обтечь. Чтобы этого не произошло, можно сделать прерывание обтекания с помощью свойства CSS clear или установить у блока с class="menu" такую высоту, которая гарантированно будет больше высоты ссылок.
Блочное горизонтальное меню (display)
Сделаем еще одно блочное меню, но немного другим способом.
Пример HTML и CSS: блочное горизонтальное меню с display
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание блочного горизонтального меню (display)</title>
<style type="text/css">
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.menu {
text-align: center; /* центруем по горизонтали inline-содержимое блока меню */
font-weight: bold;
border: 2px #900 solid;
padding: 10px;
}
.menu li {
display: inline; /* делаем элементы списка строчными тегами */
margin: 0 5px;
}
.menu a {
display: inline-block; /* делаем ссылки встроенными блоками */
color: #fff;
background: #090;
text-decoration: none;
border: 2px #900 solid;
padding: 5px;
}
.menu a:hover {
color: #900;
background: #fff;
}
.menu li.current {
display: inline-block; /* как и ссылки, делаем пункт current встроенным блоком */
color: #900;
background: #fff;
border: 2px #900 solid;
padding: 5px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.menu li.current { /* обнуление значений current */
display: inline;
color: inherit;
background: transparent;
border: 0;
padding: 0;
}
.menu li.current { /* добавляем внутрь current тег SPAN */
z-index: expression(
runtimeStyle.zIndex = 1,
innerHTML = '<span style="display: inline-block;color: #900;background: #fff;border: 2px #900 solid;padding: 5px;">'
+
innerHTML + '</span>'
);
}
</style>
<![endif]-->
</head>
<body>
<ul class="menu">
<li><a href="#">Ссылка 1</a></li>
<li class="current">Ссылка 2</li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ul>
</body>
</html>Описание примера
И все бы хорошо, но IE6 и IE7 нам как всегда доставляют проблемы, так как не понимают значение inline-block для тегов <LI>. Поэтому будем их лечить с помощью условных комментариев и expression.
Горизонтальное меню с вкладками
Давайте немного изменим наш предыдущий пример и сделаем меню, которое будет похоже на вкладки. Подобные вещи довольно часто используются на сайтах.
Пример HTML и CSS: блочное горизонтальное меню с вкладками
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Создание горизонтального меню с вкладками</title>
<style type="text/css">
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.menu {
font-weight: bold;
border-bottom: 2px #900 solid; /* стили нижней границы рамки блока меню */
padding: 10px 10px 0 100px; /* внутренние отступы */
}
.menu li {
display: inline;
margin: 0 5px;
position: relative; /* относительное позиционирование элементов списка */
bottom: -2px; /* смещение на 2px ниже блока меню */
}
.menu a {
display: inline-block;
color: #fff;
background: #090;
text-align: center;
text-decoration: none;
border: 2px #900 solid; /* стили рамки ссылок */
padding: 5px;
}
.menu a:hover {
color: #900;
background: #fff; /* цвет фона ссылок под курсором */
border-bottom-color: #fff; /* цвет нижней границы рамки */
}
.menu li.current {
display: inline-block;
color: #900;
background: #fff; /* цвет фона блока current */
text-align: center;
border: 2px #900 solid; /* стили рамки у current */
border-bottom-color: #fff; /* цвет нижней границы рамки у current */
padding: 5px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.menu li.current {
display: inline;
color: inherit;
background: transparent;
border: 0;
padding: 0;
}
.menu li.current {
z-index: expression(
runtimeStyle.zIndex = 1,
innerHTML = '<span style="display: inline-block;color: #900;background: #fff;border: 2px #900 solid;border-bottom-color: #fff;padding: 5px;">'
+
innerHTML + '</span>'
);
}
</style>
<![endif]-->
</head>
<body>
<ul class="menu">
<li><a href="#">Ссылка 1</a></li>
<li class="current">Ссылка 2</li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ul>
</body>
</html>Описание примера
Этот пример похож на предыдущий, поэтому рассмотрим только отличия.