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






В этой небольшой заметке представлен перевод статьи с tutorialzine.com о создании цветастого анимированного меню, используя лишь CSS3 и пиктографический шрифт Font Awesome. Если кто не знает, пиктографический шрифт — это шрифт, в котором вместо алфавитно-цифровых символов используются пиктограммы (они же «иконки»). Для разработчиков это означает удобный способ работы с элементами, содержащими пиктограммы — кнопками, тулбарами и т. п. Всё что для этого нужно — это поддержка браузером CSS3-загрузки шрифтов, что на сегодня умеют почти все современные браузеры. Для того, чтобы добавить пиктограмму внутрь элемента, вам нужно всего лишь определить  нужный класс для элемента и — вуаля, используя селектор :before, Font Awesome лёгким движением руки превращает брюки в элегантные шорты. Поехали.


HTML

Вот 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, а полный список соответствия классов пикотграммам вы можете подсмотреть здесь. Выпадающее меню организовано простым одноуровневым немаркированным списком.


CSS

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

Вооружившись вышеозначенным селектором, определим размеры и положение контейнера всего меню:

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

display: inline-block здесь определён для того, чтобы блочные по своей природе элементы LI вели себя почти как инлайновые, выстраиваясь в одну строку, а position: relative обеспечивает корректное поведение выпадающих подменю. Как помним, A-элементы содержат в себе пиктограммы, выполненные при помощи текста, так что немного подкорректируем умолчания для A-элементов, убрав подчёркивание текста и приятный глазу синий цвет:

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

Резюме

Пиктографические шрифты — обалденное дополнение к вебмастерскому инструментарию. Так как пиктограммы являются по сути текстовыми символами, вы можете изменять такие их атрибуты, как font-size, color и text-shadow. В решении, представленном в этой заметке, мы не использовали ни файлы изображений, ни JavaScript, с лёгкостью и понятным кодом добившись неплохого результата, а адаптировать это решение к дизайну вашего проекта вы сможете за пару минут.

И напоследок: