Полноцветное анимированное навигационное меню на CSS3

В этой короткой статье мы создадим полноцветное выпадающее меню, используя только CSS3-эффекты и шрифтовые иконки Font Awesome. Шрифтовые иконки – это набор изображений, которые отображаются на символах вместо изображений соответствующих букв.

Поэтому такие иконки работают в любом достаточно современном браузере, который поддерживает HTML5-шрифты. Чтобы добавить иконку к элементу, нужно только включить этот элемент в соответствующий класс, а всю остальную работу сделает файл стиля awesome при помощи элемента :before.

Демонстрация

Загрузить файлы

HTML

Разметка, с которой мы будем работать:

index.html
<nav id="colorNav">
        <ul>
                <li class="green">
                        <a href="#" class="icon-home"></a>
                        <ul>
                                <li><a href="#">Dropdown item 1</a></li>
                                <li><a href="#">Dropdown item 2</a></li>
                                <!-- More dropdown options -->
                        </ul>
                </li>

                <!-- More menu items -->

        </ul>
</nav>

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

CSS

Как видно из разметки, наше меню состоит из списков, вложенных в такие же списки, поэтому при написании стилей нам придётся соблюдать осторожность. Нам не нужно, чтобы ниже лежащие тэги <ul>
наследовали всё оформление от выше лежащих. К счастью, именно для таких случаев в CSS существует селектор “>”:

assets/css/styles.css
#colorNav > ul{
    width: 450px;
    margin:0 auto;
}

Это ограничивает заданную ширину поля первым уровнем неупорядоченного списка, который является прямым наследником элемента #colorNav. С учётом этого пункты нашего меню на самом деле будут выглядеть следующим образом:

#colorNav > ul > li{ /* will style only the top level 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. Чтобы выпадающие меню отображались там, где нужно, свойство position должно иметь значение relative. Определим Awesome-иконки как часть стиля ссылок:

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

Теперь перейдём к выпадающим спискам. Самое интересное здесь – CSS3-анимация. Скроем списки, присвоив их свойству maximum-height значение 0. При наведении мы будем анимировать maximum-height до большего значения, что заставит наш список постепенно открываться:

#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;
}

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

Следующий шаг – оформление элементов выпадающего меню:

#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{
    /* This is the color of the menu item */
    background-color:#00c08b;

    /* This is the color of the icon */
    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.

Готово!

Шрифтовые иконки – отличное дополнение к набору повседневных инструментов любого веб-разработчика. Иконки являются символами, следовательно, мы можем применять к ним font-size, color, text-shadow и другие текстовые атрибуты.

А поскольку благодаря шрифтовым иконкам наш пример обошёлся без использования файлов изображений или скриптов, вы с лёгкостью сможете адаптировать его к дизайну любого существующего сайта.

Перевод статьи «Colorful CSS3 Animated Navigation Menu» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Источник: http://feedproxy.google.com/~r/3wdev/~3/5YPw3Gr8hwM/article_2057.html

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Полноцветное анимированное навигационное меню на CSS3 | | 2014-08-14 15:36:00 | | Статьи Web-мастеру | | В этой короткой статье мы создадим полноцветное выпадающее меню, используя только CSS3-эффекты и шрифтовые иконки Font Awesome. Шрифтовые иконки – это набор изображений, которые отображаются на | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: