Создаем выпадающее меню на css.

Из данной статьи вы узнаете, как создать горизонтальное и вертикальное выпадающее меню на CSS. Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Будут рассмотрены примера меню, первое – горизонтальное меню, второе – вертикальное меню. Принцип действия у них один и тот же.

Создание горизонтального меню.

Шаг 1 - Структура горизонтального выпадающего меню.

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

<ul id="cssmenu">
        <li><a href="#">Горизонтальное</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                </ul>
        </li>
        <li><a href="#">CSS</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                        <li><a href="#">Ссылка 3</a></li>
                        <li><a href="#">Ссылка 4</a></li>
                        <li><a href="#">Ссылка 5</a></li>
                </ul>
        </li>
        <li><a href="#">Меню</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                </ul>
        </li>
</ul>

В коде выше вы можете видеть неупорядоченные списки <UL>. UL были добавлены в родительский тег UL, и вложены в элемент <LI>. Используя этот метод мы можем создать выпадающее меню, после добавления CSS все выровняется и начнет выглядеть иначе.

Принцип думаю ясен и вы сообразите как вставить свои пункты меню.

Шаг 2 - Стилизация горизонтального выпадающего меню при помощи CSS.

/* CSS Document */
ul#cssmenu {
        width:350px;
        margin: 0;
        border: 0 none;
        padding: 0;
        list-style: none;
        background: #003366;
        height: 30px;
        font: bold 12px/28px Verdana, Arial;
        border-left:#003366 1px solid;
}

ul#cssmenu li {
        margin: 0;
        border: 0 none;
        padding: 0;
        float: left;
        display: inline;
        list-style: none;
        position: relative;
        height: 30px;
}

ul#cssmenu ul {
        margin: 0;
        border: 0 none;
        padding: 0;
        width: 160px;
        list-style: none;
        display: none;
        position: absolute;
        top: 30px;
        left: 0;
}

ul#cssmenu ul:after {
        clear: both;
        display: block;
        font: 1px/0px serif;
        content: ".";
        height: 0;
        visibility: hidden;
}

ul#cssmenu ul li {
        width: 150px;
        float: left;
        display: block !important;
        display: inline;
}

/* Main Menu */
ul#cssmenu a {
        border: 0px;
        padding: 0 10px;
        float: none !important;
        float: left;
        display: block;
        background: #003366;
        color: #FFFFFF;
        font: bold 12px/28px Verdana, Arial;
        text-decoration: none;
        height: auto !important;
        height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
        background: #FFFFFF;
        color:#003366;
        border-top:#003366 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
        border-top: 2px solid #FFFFFF;
        float: none;
        background: #003366;
        color: #FFFFFF;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
        border-top: 2px solid #FFFFFF;
        background: #FFFFFF;
        color:#003366;
        border:#003366 1px solid;
}

ul#cssmenu ul ul {
        display: none;
        position: absolute;
        top: 0;
        left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
        display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
        display: block;
}

Шаг 3 - Создание JS для IE.

IE никак не хочет отображать такое меню как нам надо, поэтому напишем небольшой JavaScript для IE:

// JavaScript Document
function cssmenuhover()
{
        if(!document.getElementById("cssmenu"))
                return;
        var lis = document.getElementById("cssmenu").getElementsByTagName("LI");
        for (var i=0;i<lis.length;i++)
        {
                lis[i].onmouseover=function(){this.className+=" iehover";}
                lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}
        }
}
if (window.attachEvent)
        window.attachEvent("onload", cssmenuhover);

Теперь наше меню кроссбраузерное и корректно работает в IE5.5+, FF1+, Opera8+. 

Создание вертикального меню.

Шаг 1 - Структура вертикального выпадающего меню.

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

<ul id="cssmenu">
        <li><a href="#">Вертикальное</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                </ul>
        </li>
        <li><a href="#">CSS</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                        <li><a href="#">Ссылка 3</a></li>
                        <li><a href="#">Ссылка 4</a></li>
                        <li><a href="#">Ссылка 5</a></li>
                </ul>
        </li>
        <li><a href="#">Меню</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                </ul>
        </li>
</ul>

Шаг 2 - Стилизация горизонтального выпадающего меню при помощи CSS.

/* CSS Document */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
}

ul#navmenu-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-v li {
  float: left;
  display: block !important;
  display: inline;
  position: relative;
  border:#003366 1px solid;
}
ul#navmenu-v li ul li {
border:none;
border-bottom:#FFFFFF 2px solid;
}

/* Root Menu */
ul#navmenu-v a {
  padding: 0 6px;
  display: block;
  background: #003366;
  color: #FFFFFF;
  font: bold 12px/28px Verdana, Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%;
}


ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
  background: #FFFFFF;
  color: #000000;

}

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
  background: #003366;
  color: #FFFFFF;
  border:#003366 1px solid;
}


ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
  background: #FFFFFF;
  color: #003366;
  border:#003366 1px solid;
}



ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 161px;
}


ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
  display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
  display: block;
}

Шаг 3 - Создание JS для IE.

Небольшой JS код для корректности отображения в IE:

navHover = function() {
        var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
        for (var i=0; i<lis.length; i++) {
                lis[i].onmouseover=function() {
                        this.className+=" iehover";
                }
                lis[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" iehover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", navHover);