В этой небольшой заметке представлен перевод статьи с tutorialzine.com о создании цветастого анимированного меню, используя лишь CSS3 и пиктографический шрифт Font Awesome. Если кто не знает, пиктографический шрифт — это шрифт, в котором вместо алфавитно-цифровых символов используются пиктограммы (они же «иконки»). Для разработчиков это означает удобный способ работы с элементами, содержащими пиктограммы — кнопками, тулбарами и т. п. Всё что для этого нужно — это поддержка браузером CSS3-загрузки шрифтов, что на сегодня умеют почти все современные браузеры. Для того, чтобы добавить пиктограмму внутрь элемента, вам нужно всего лишь определить нужный класс для элемента и — вуаля, используя селектор :before, Font Awesome лёгким движением руки превращает брюки в элегантные шорты. Поехали.
Вот HTMK-скелетик, на котором мы будем экспериментировать:
<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>
Каждый элемент меню — это дочерний LI-элемент первого уровня UL-списка. Каждый такой LI- элемент содержит сначала ссылку и затем ещё один немаркированный список. Ссылка здесь выполняет роль кнопки с пиктограммой, являющейся контейнером для выпадающего меню. Пиктограмму кнопки можно определить, добавив соответствующий класс к ссылке: в примере выше — это icon-home, а полный список соответствия классов пикотграммам вы можете подсмотреть здесь. Выпадающее меню организовано простым одноуровневым немаркированным списком.
Возвращаясь к фрагменту кода выше, мы видим два вложенных друг в друга UL-списка, то бишь два элемента с одинаковым именем. Так что при написании CSS мы должны быть поаккуратней, чтобы не захватить каскадом лишних дочерних элементов. К счастью, у нас в распоряжении имеется селектор '>', который не даст обработчику CSS опускаться слишком глубоко там, где это не нужно.
Вооружившись вышеозначенным селектором, определим размеры и положение контейнера всего меню:
#colorNav > ul {
width: 450px;
margin: 0 auto;
}
#colorNav > ul {
width: 450px;
margin: 0 auto;
}
А затем и элементов верхнего уровня:
#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;
}
#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 здесь определён для того, чтобы блочные по своей природе элементы LI вели себя почти как инлайновые, выстраиваясь в одну строку, а position: relative обеспечивает корректное поведение выпадающих подменю. Как помним, A-элементы содержат в себе пиктограммы, выполненные при помощи текста, так что немного подкорректируем умолчания для A-элементов, убрав подчёркивание текста и приятный глазу синий цвет:
#colorNav > ul > li > a {
color: inherit;
text-decoration: none !important;
font-size: 24px;
padding: 25px;
}
#colorNav > ul > li > a {
color: inherit;
text-decoration: none !important;
font-size: 24px;
padding: 25px;
}
Поехали дальше. Теперь приступим к выпадающим меню. Здесь для реализации анимации мы воспользуемся CSS-атрибутом transition. Также, определим нулевое значение высоты элемента в обычном состоянии, таким образом скрыв его до того, как над ним не появится указатель мыши:
#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;
/* CSS-анимация */
max-height: 0px;
overflow: hidden;
transition: max-height 0.4s linear;
-webkit-transition: max-height 0.4s linear;
-moz-transition: max-height 0.4s linear;
}
#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;
/* CSS-анимация */
max-height: 0px;
overflow: hidden;
transition: max-height 0.4s linear;
-webkit-transition: max-height 0.4s linear;
-moz-transition: max-height 0.4s linear;
}
Теперь определим поведение элемента при наведении на него указателя. Здесь мы определяем лишь новое значение высоты элемента, а всю работу делает предыдущий блок.
#colorNav li:hover ul {
max-height: 200px;
}
#colorNav li:hover ul {
max-height: 200px;
}
Значение высоты указано жёстко, поскольку, к сожалению, на данный момент автору не известно способов определить её автоматически при помощи одних лишь 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) {
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 {
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;
}
#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) {
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 {
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;
}
Ну и, конечно же, куда мы без цвета. Раскрасим каждый элемент по-своему:
#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; }
#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; }
| 