4 012 Скрипты / Menu & Nav

Выпадающее CSS3 меню

Выпадающее CSS3 меню

Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым - Impressionist UI

HTML

В начале создаем простой список:

<ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Форум</a></li>
    <li><a href="#">Кабинет</a>
        <ul>
            <li><a href="#" class="documents">Документы</a></li>
            <li><a href="#" class="messages">Сообщения</a></li>
            <li><a href="#" class="signout">Выход</a></li>
        </ul>
    </li>
    <li><a href="#">Загрузки</a></li>
    <li><a href="#">Видео</a></li>
    <li><a href="#">Справка</a></li>
</ul>

CSS

Начнем с удаления отступов (внутренних и внешних), границ  и контуров со всех элементов нашего меню.

Затем добавим фиксированную высоту  и ширину, скруглим углы и добавим CSS3 градиент. Для того, чтобы ссылки расположить горизонтально применяем float:left, плюс установим относительное позиционирование для дальнейшего выравнивания под-меню:

Для оформления ссылок меню добавим некоторые основные свойства CSS, такие как цвет, отступы, шрифты и др.

Затем добавим тень для текста и transition для плавного изменения цвета ссылки при наведении курсора. Для создания сепаратора (отделителя) ссылки добавим границу слевой и справой стороны, а затем удалим левую границу для первой ссылки, и правую границу для последней ссылки.

При наведении курсора на ссылку будем только менять цвет:

Теперь займемся под-меню.

В начале установим абсолютное позиционирование с отступами сверху 40px и 0px слева для пнуктов меню и добавим закругления для углов. Установим непрозрачность в 0, а при наведении в 1. Для эффекта слайда (вверх/вниз), мы должны установить высоту списка 0px в скрытом состоянии, и 36px в состоянии наведения курсора.

Установим ширину под-меню в 100px и добавим нижнюю границу в качестве сепаратора. Для последней ссылки нижнюю границу уберем.

.menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
 
    border: none;
    border-bottom: 1px solid #353539;
}
 
.menu ul li:last-child a { border: none; }

И в завершении нам нужно добавить иконки к каждой ссылке под-меню. Для этого для каждой ссылки создадим свой класс и назначим в качестве background свое изображение:

.menu a.documents { background: url(../img/docs.png) no-repeat 6px center; }
.menu a.messages { background: url(../img/bubble.png) no-repeat 6px center; }
.menu a.signout { background: url(../img/arrow.png) no-repeat 6px center; }
Скачать 2979Загрузок 76,61 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи