Опубликовано: 12.05.2011 Последняя правка: 16.12.2015

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

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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)

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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)

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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" "http://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>

Результат примера

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

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