В этом небольшом уроке мы создадим красочное выпадающее меню, используя только CSS3 и шрифт иконок Font Awesome. Шрифт иконок, как следует из названия, шрифт, который отображает иконки вместо букв. Это означает, что вы получите симпатичные векторные иконки в любом браузере, который поддерживает пользовательские шрифты HTML5 (практически все современные браузеры). Чтобы добавить иконку к элементам, вам нужно всего лишь присвоить класс элементу и иконка будут добавлена при помощи псевдо-класса :before.

HTML
Мы будем использовать следующую разметку:

<nav id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Выпадающий пункт 1</a></li>
                <li><a href="#">Выпадающий пункт 2</a></li>
                <!-- Остальные выпадающие пункты меню -->
            </ul>
        </li>
        <!-- Пункты меню-->
    </ul>
</nav>

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

Анимированное меню на CSS3

CSS
Как вы видите из HTML-фрагмента выше, мы имеем один список, вложенный в основной, таким образом, мы должны писать CSS с осторожностью. Потому как мы не хотим, чтобы стили верхнего списка распространялись на потомков. Для этого мы будем использовать CSS селектор ">":

#colorNav > ul{
    width: 450px;
    margin:0 auto;
}

Эти правила ограничивают ширину и отступы только для первого неупорядоченного списка, который является прямым потомком пункта #colorNav. Теперь определим стили для пунктов верхнего уровня:

#colorNav > ul > li{ /* стили для верхнего уровня li */
    list-style: none;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    display: inline-block;
    line-height: 1;
    margin: 1px;
    border-radius: 3px;
    position:relative;
}

Мы укажем для свойства display значение inline-block, чтобы элементы списка отображались в одну линию, и зададим относительное позиционирование. Анкоры содержат иконки, как это определено шрифтом Awesome.

#colorNav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}

Теперь мы можем заняться выпадающим меню. Здесь мы будем определять CSS3 анимацию. Мы будем устанавливать максимальную высоту в 0 пикселей, которая будет скрывать выпадающий список. При наведении мыши мы будем изменять максимальную высоту, и список будет постепенно раскрывается:

#colorNav li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width:180px;
    left:50%;
    margin-left:-90px;
    top:70px;
    font:bold 12px 'Open Sans Condensed', sans-serif;
    /* This is important for the show/hide CSS animation */
    max-height:0px;
    overflow:hidden;
    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}

И это будет анимироваться:

#colorNav li:hover ul{
    max-height:200px;
}

Значение 200px является произвольным и его придется увеличить, если ваш выпадающий список содержит много значений.

На следующем шаге определим стили для выпадающих пунктов:

#colorNav li ul li{
    background-color:#313131;
}
#colorNav li ul li a{
    padding:12px;
    color:#fff !important;
    text-decoration:none !important;
    display:block;
}
#colorNav li ul li:nth-child(odd){ /* zebra stripes */
    background-color:#363636;
}
#colorNav li ul li:hover{
    background-color:#444;
}
#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    margin-top:25px;
    position:relative;
}
#colorNav li ul li:first-child:before{ /* the pointer tip */
    content:'';
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}
#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

И, конечно, поэкспериментируем немного с цветами! Вот 5 версий:

#colorNav li.green{
    /* Это цвет пункта меню */
    background-color:#00c08b;
    /* Это цвет иконки */
    color:#127a5d;
}
#colorNav li.red{        background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{        background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{    background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{    background-color:#df6dc2;color:#9f3c85;}

Еще один плюс использования шрифта иконок, это то, что вы можете легко изменить цвет значка просто изменив свойство color. Это означает, что все настройки вы можете сделать при помощи одного CSS.
Исходники:

[think=http://www.kolobok.us/smiles/standart/yahoo.gif] 😎  Готово[/think]
ЭТОТ ПРИМЕР НЕ ИСПОЛЬЗУЕТ НИ ИЗОБРАЖЕНИЯ, НИ JS, ПОЭТОМУ ОН ДОЛЖЕН БЫТЬ ДОСТАТОЧНО ЛЕГКИМ, ЧТОБЫ НАСТРОИТЬ ЕГО В СООТВЕТСТВИИ С ТЕКУЩИМ ДИЗАЙНОМ В ТЕЧЕНИЕ НЕСКОЛЬКИХ МИНУТ.

Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему