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

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

Выпадающее горизонтальное меню — это меню с основными пунктами по горизонтали, при наведении курсора мыши на которые, рядом (обычно снизу) появляется еще несколько подпунктов со ссылками. Как правило, подобные меню создаются на основе вложенных друг в друга списков, поэтому здесь мы рассмотрим именно такие варианты.

Двухуровневое выпадающее горизонтальное меню

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

Двухуровневое выпадающее горизонтальное меню

Пример 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>
  <!--[if IE 6]>
  <script type="text/javascript">
   function ie6hover() {
    if(!document.getElementById("menu"))
     return true;
    var elem_li = document.getElementById("menu").getElementsByTagName("LI");
    for (var i=0; i<elem_li.length; i++)
     {
      elem_li[i].onmouseover=function() {
                              this.className+=" ie6";
                             }
      elem_li[i].onmouseout=function() {
                             this.className=this.className.replace(" ie6", "");
                            }
     }
   }
   window.onload=ie6hover;
  </script>
  <![endif]-->
  <style type="text/css">
   ul, li {
    list-style: none; /* убираем маркеры списков */
    margin: 0; /* обнуляем внешние поля */
    padding: 0; /* обнуляем внутренние отступы */
   }
   #menu {
    height: 35px; /* высота основного меню */
    background: #c00; /* фон */
    font: bold 14px/25px Arial, sans-serif; /* стили шрифта */
   }
   #menu li {
    float: left; /* элементы списков всплывают влево */
    background: #c00; /* фон пунктов */
    position: relative; /* относительное позиционирование */
   }
   #menu ul li {
    float: none; /* отменяем всплытие для внутренних элементов списков */
   }
   #menu a {
    display: block; /* делаем ссылки блоками */
    color: #fff; /* цвет текста ссылок */
    text-decoration: none; /* убираем подчеркивание */
    white-space: nowrap; /* запрещаем перевод строк */
    padding: 5px 10px; /* внутренние отступы */
   }
   #menu ul a {
    min-width: 150px; /* минимальная ширина подпунктов */
    width: auto !important; /* для поддержки IE6 */
    width: 150px; /* для IE6 */
   }
   #menu ul {
    position: absolute; /* абсолютное позиционирование внутренних списков */
    display: none; /* скрываем внутренние списки */
   }
   #menu li:hover ul, #menu li.ie6 ul {
    display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */
   }
   #menu li:hover ul a, #menu li.ie6 ul a {
    color: #fff; /* цвет текста внутренних ссылок */
    background: #c00; /* цвет фона */
   }
   #menu li:hover a, #menu li ul a:hover, #menu li.ie6 a {
    color: #c00; /* цвет текста внешних ссылок при наведении курсора на LI,
                    а также внутренних ссылок при наведении курсора на них самих */
    background: #cff; /* фон */
   }
  </style>
 </head>
 <body>
  <ul id="menu">
   <li><a href="#">Пункт 1</a>
    <ul>
     <li><a href="#">Подпункт 1</a></li>
     <li><a href="#">Подпункт 2</a></li>
    </ul>
   </li>
   <li><a href="#">Пункт 2</a>
    <ul>
     <li><a href="#">Подпункт 1</a></li>
     <li><a href="#">Подпункт 2</a></li>
    </ul>
   </li>
   <li><a href="#">Пункт 3</a>
    <ul>
     <li><a href="#">Подпункт 1</a></li>
     <li><a href="#">Подпункт 2</a></li>
    </ul>
   </li>
  </ul>
 </body>
</html>

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

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

Как обычно, старичок IE6 не все знает, поэтому приходится ему кое-что объяснять.

Трехуровневое выпадающее горизонтальное меню

Немного усложним предыдущий пример и сделаем выпадающее горизонтальное меню состоящее из трех уровней.

Трехуровневое выпадающее горизонтальное меню

Пример 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>
  <!--[if IE 6]>
  <script type="text/javascript">
   function ie6hover() {
    if(!document.getElementById("menu"))
     return true;
    var elem_li = document.getElementById("menu").getElementsByTagName("LI");
    for (var i=0; i<elem_li.length; i++)
     {
      elem_li[i].onmouseover=function() {
                              this.className+=" ie6";
                             }
      elem_li[i].onmouseout=function() {
                             this.className=this.className.replace(" ie6", "");
                            }
     }
   }
   window.onload=ie6hover;
  </script>
  <![endif]-->
  <style type="text/css">
   ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
   }
   #menu {
    height: 35px;
    background: #333;
    font: bold 14px/25px Arial, sans-serif;
   }
   #menu li {
    float: left;
    position: relative;
   }
   html > body #menu ul li {
    float: none;  /* отменяем всплытие (для всех браузеров кроме IE6) */
   }
   * html #menu ul li {
    clear: both; /* для IE6 прерываем обтекание */
   }
   #menu a {
    display: block;
    color: #f30;
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 3px 5px 5px;
   }
   #menu ul a {
    min-width: 150px;
    width: auto !important;
    width: 150px;
   }
   #menu ul {
    position: absolute; /* абсолютное позиционирование всех тегов UL внутри меню */
    display: none;
    background: #333;
    border: 1px #f30 solid;
   }
   #menu li.drop {
    background: url('images/drop.png') 100% 13px no-repeat; /* для LI с class="drop" добавляем фон-стрелочку */
    padding-right: 15px; /* правый отступ */
   }
   #menu li:hover, #menu li.ie6 {
    background-color: #fc9; /* цвет фона при наведении на элементы меню */
   }
   #menu li:hover ul li ul, #menu li.ie6 ul li ul {
    top: -1px; /* смещение самого внутреннего списка на 1px вверх */
    left: 100%; /* и смещение его за правую границу родителя */
    display: none; /* скрытие списка */
   }
   #menu li:hover ul, #menu li:hover ul li:hover ul, #menu li.ie6 ul, #menu li.ie6 ul li.ie6 ul {
    display: block; /* делаем внутренние списки блочными (видимыми) при наведении мыши */
   }
  </style>
 </head>
 <body>
  <ul id="menu">
   <li class="drop"><a href="#">Пункт 1</a>
    <ul>
     <li class="drop"><a href="#">Подпункт 1</a>
      <ul>
       <li><a href="#">Подпункт 1-1</a></li>
       <li><a href="#">Подпункт 1-2</a></li>
      </ul>
     </li>
     <li class="drop"><a href="#">Подпункт 2</a>
      <ul>
       <li><a href="#">Подпункт 2-1</a></li>
       <li><a href="#">Подпункт 2-2</a></li>
      </ul>
     </li>
    </ul>
   </li>
   <li class="drop"><a href="#">Пункт 2</a>
    <ul>
     <li><a href="#">Подпункт 1</a></li>
     <li><a href="#">Подпункт 2</a></li>
    </ul>
   </li>
   <li><a href="#">Пункт 3</a></li>
  </ul>
 </body>
</html>

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

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

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

И снова немного пролечиваем IE6.