Меню в стиле Mac на CSS3

Сегодня мы предлагаем вам простой способ создать выпадающее меню в стиле Mac, используя самые известные ныне свойства CSS3: border-radius, box shadow и text-shadow. Вам также понадобится вспомнить, что такое тег <nav> в HTML5.

Традиционно наилучшего эффекта вы добьетесь при просмотре работы в Firefox, Safari и Chrome. Собственно выпадающее меню также работает и IE7+, с той лишь разницей, что края перестают быть закругленными.

Ниже приведен скриншот, как будет выглядеть наше меню в браузерах, не поддерживающих CSS3.

ГРАДИЕНТ

Для создания градиента используем картинку. CSS3 предлагает нам для этого специальную функцию, но, помня, что не все браузеры пока ее поддерживают, воспользуемся старым добрым методом.

Интенсивность градиента настраивается простым перемещением картинки, а цвет кнопки — изменением цвета фона (background color)

CSS

Мы не будем подробно расписывать каждую строчку CSS. Вместо этого приведем картинку, на которой изображены все ключевые моменты, важные для понимая логики кода.

А вот и стили:

#nav {
	margin: 0;
	padding: 7px 6px 0;
	background: #7d7d7d url(gradient.png) repeat-x 0 -110px;
	line-height: 100%;
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}
/* Основной уровень */
#nav a {
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
	-webkit-border-radius: 1.6em;
	-moz-border-radius: 1.6em;
	text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
	background: #000;
	color: #fff;
}
/* Основной уровень при наведении */
#nav .current a, #nav li:hover > a {
	background: #666 url(gradient.png) repeat-x 0 -40px;
	color: #444;
	border-top: solid 1px #f8f8f8;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
	box-shadow: 0 1px 1px rgba(0,0,0, .2);
	text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* Замена основного уровня при наведении */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #666;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}
#nav ul a:hover {
	background: #0078ff url(gradient.png) repeat-x 0 -100px !important;
	color: #fff !important;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* Выпадение */
#nav li:hover > ul {
	display: block;
}
/* Второй уровень списка */
#nav ul {
	display: none;
	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	background: #ddd url(gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
	box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 0 #fff;
}
/* Третий уровень списка */
#nav ul ul {
	left: 181px;
	top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-moz-border-radius-topleft: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomright: 9px;
}
/* Дополнения */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
}
html[xmlns] #nav {
	display: block;
}
* html #nav {
	height: 1%;
}

Как видите, все довольно просто. Желаем удачи в ваших экспериментах!