Навигационное меню с помощью CSS3

Здравствуйте, уважаемые читатели Easy-Code.ru. В этом уроке мы сделаем яркое меню с анимированными выпадающими подпунктами, используя только CSS3 и Font Awesome шрифт иконок. Данный шрифт отображает иконки вместо букв, таким образом мы получим красивые векторные изображения для нашего меню.

HTML

Html разметка будущего меню:

<nav id="colorNav">
	<ul>
		<li>
			<a href="#"></a>
			<ul>
				<li><a href="#">Dropdown item 1</a></li>
				<li><a href="#">Dropdown item 2</a></li>
				<!-- выпадающий список -->
			</ul>
		</li>

		<!-- элементы меню -->

	</ul>
</nav>

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

CSS

Как видно в нашей html разметке мы имеем вложенные неупорядоченные списки (ul), поэтому мы должны внимательно писать наш 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 для отображения элементов меню в одну строку, и задаем position:relative для правильного отображения выпадающего списка. Элементы anchor (<a>) будут содержать иконки.

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

Перейдем к выпадающим спискам, определим CSS свойство transitition. Изначально установи максимальную высоту равную 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;

	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), к сожалению нет способа только с помощью 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;}

Еще один приятный момент использования шрифта иконок: мы можем менять цвет всего лишь задав нужный стиль. Таким образом мы можем производить все настройки используя только CSS.

На этом всё!