CSS меню: выпадающее горизонтальное меню на css

Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить – юзабильные. Сегодня мы создадим юзабильное выпадающее горизонтальное меню на чистом css коде. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS. Рассмотрим два варианта выпадающих горизонтальных меню на CSS. Хорошо, когда есть выбор, думаю вы согласны.

Если вам нужно простое горизонтальное меню. Читаем статью о создании горизонтального css меню. Освоив основы приступайте к созданию выпадающего меню.

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

Для ясности смотрите скриншот ниже. Наверняка вы знакомы с такой структурой горизонтального меню.

Для еще большей ясности, посмотрим на HTML структуру меню. Убедимся, чем именно достигнуто горизонтальное положение меню и его валидность. Структура css меню:

Показ и скрытие дочерних элементов меню осуществляется с помощью CSS: ul > li:hover ul. То есть достаточно просто. С помощью этого переключателя можно определить поведение всех дочерних меню. При создании обычного горизонтального меню, к тому же display:block мы добавляем другие стили, такие как, цвет фона и т.д. Единственная разница между обычным меню и выпадающим меню заключается в том, что мы не ставим стили для вложенных UL. Нужно ставить на зависящий LI элемент, который наведенный (UL > LI: hover).

Давайте рассмотрим CSS код:

#header { height:120px; position:relative;

background: transparent url(header_bkg.png) repeat-x scroll top center;}

#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}

#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px; 

position:relative; padding:10px; width:100px;}

#nav > li:hover ul { display:block; }

#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }

#nav li ul { margin:0px; padding:0px; display:none;}

#nav li ul li { list-style-type:none; margin:10px 0 0 0;}

#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}

#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}

#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }

Вот как это можно сделать с помощью чистого CSS кода. До сих пор в голове не влаживается, для чего использовать JavaScript, разве что для плавного сворачивания и разворачивания.

Вариант 2 - горизонтальное меню + решение для IE6

Нужно обратить внимание, что вариант 1, не будет работать в IE6. Решением совместимости меню с IE6, будет кусочек js кода. Ближе к делу, создаем меню. Ниже предоставлен скриншот будущего меню:

Конструкция меню схожа с первой версией, поэтому перейдем к самому коду.

HTML

<ul id="menu">
        <li><a href="#">Пункт №1</a></li>
        <li>
                <a href="#">Пункт №2</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                        <li><a href="#">Подпункт №2</a></li>
                        <li><a href="#">Подпункт №3</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Пункт №3</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="#">Пункт №4</a>
                <ul>
                        <li><a href="#">Подпункт №1</a></li>
                </ul>
        </li>
        <li>
                <a href="#">Пункт №5</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>
</ul>

CSS

#menu {
        padding: 0;
        margin: 0;
        font-size: 100%;
        font-family: Georgia;
        }
#menu li {
        list-style: none;
        float: left;
        height: 33px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #171717;
        position: relative;
        padding-top: 12px;
        }
#menu li ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 45px;
        }
#menu li ul li {
        float: none;
        height: 33px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #7F7F7F;
        }
#menu li a {
        display: block;
        width: 150px;
        height: 33px;
        color: #fff;
        text-decoration: none;
        }
#menu li:hover ul, #menu li.jshover ul {
        display: block;
        }
#menu li:hover, #menu li.jshover {
        background: #424242;
        }

JS – решение для IE6

<script>
        jsHover = function() {
        var hEls = document.getElementById("menu").getElementsByTagName("li");
        for (var i=0, len=hEls.length; i<len; i++) {
        hEls[i].onmouseover=function() { this.className+=" jshover"; }
        hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
        }
        }
        if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>

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

Дальше: Создание сайта для SAPE