Создаем интерактивное меню на чистом css3

Всем привет! Сегодня мы научимся делать замечательное интерактивное меню на чистом css! Отличная идея для оформления персонального сайта. Итак, приступим.

Для начала создадим разметку меню на html:

<ul class="menu">
    <li><a href="">Обо мне</a><img src="1.jpg"/></li>
    <li><a href="">Мои работы</a><img src="2.jpg"/></li>
    <li><a href="">Инструментарий</a><img src="3.jpg"/></li>
    <li><a href="">Контакты</a><img src="4.jpg"/></li>
</ul>

Тут все просто - обычный список пунктов меню. Да, нам понадобятся 4 картинки. У меня они лежат в корне. Размер у них одинаковый - 375 пикселей по ширине и 400 по высоте. При других значениях придется подбирать цифры в css файле, но об этом позже.

Теперь самое главное - стили css посмотрим на них целиком:

.menu{
	width: 760px;
	margin:0 auto;
	padding:0;
	position: relative;
	list-style:none;
}
.menu li:nth-child(1):hover a{
	background-color: rgba(174,54,55,0.9);
}
.menu li:nth-child(2):hover a{
	background-color: rgba(195, 210, 67, 0.9)
}
.menu li:nth-child(3):hover a{
	background-color: rgba(211, 132, 57, 0.9);
}
.menu li:nth-child(4):hover a{
	background-color: rgba(142, 116, 99, 0.9);
}
.menu li a{
	font-size: 28px;
	display: block;
	width: 365px;
	padding: 0px 10px;
	text-align: right;
	position: relative;
	z-index: 10;
	background: #fff;
	height: 100px;
	border-right: 1px solid #ddd;
	text-decoration:none;
	color:#000;
	background-color: rgba(255,255,255, 0.8);
	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.menu li:hover a{
	color: #fff;
}
.menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.menu li:hover img{
	left: 385px;
	opacity: 1;
}

Что тут может быть интересного? Давайте разберем:

.menu li:nth-child(1):hover a{
	background-color: rgba(174,54,55,0.9);
}
.menu li:nth-child(2):hover a{
	background-color: rgba(195, 210, 67, 0.9)
}
.menu li:nth-child(3):hover a{
	background-color: rgba(211, 132, 57, 0.9);
}
.menu li:nth-child(4):hover a{
	background-color: rgba(142, 116, 99, 0.9);
}

Этим кодом мы задаем фоновый цвет при наведении на пункты меню. nth-child(2n) - это указание, что код следует применить к каждым пунктам меню, порядковый номер которых делится на 2 (2, 4, 6 и так далее). Соответственно nth-child(3n) - пунктам, которые делятся на 3 - третий, шестой и так далее. Цвет задается в формате RGBA - цвет rgb - красный, зеленый, синий и прозрачность. Прозрачность задается коэффициентом. 0.9 - это 10% прозрачности и 90% цвета.

.menu li a{
	font-size: 28px;
	display: block;
	width: 365px;
	padding: 0px 10px;
	text-align: right;
	position: relative;
	z-index: 10;
	background: #fff;
	height: 100px;
	border-right: 1px solid #ddd;
	text-decoration:none;
	color:#000;
	background-color: rgba(255,255,255, 0.8);
	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.menu li:hover a{
	color: #fff;
}

Здесь написано следующее: сначала цвет ссылки черный - color:#000; При наведении (.menu li:hover a) - цвет текста становится белым - color: #fff; Далее: transition: color 0.2s linear; - это анимация. Создает эффект плавного перехода цвета от черного к белому и обратно. Свойство написано с префиксами для всех браузеров, так как не все браузеры понимают это новое свойство css3 без префикса. z-index:10; задан для того, чтобы пункт меню находился сверху картинки.

.menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.menu li:hover img{
	left: 385px;
	opacity: 1;
}

Эти свойства указывают, что картинка располагается относительно пункта меню - прямо под ним (потому что ранее мы задали z-index) и она (картинка) прозрачна - opacity:0;. То есть ее не видно. При наведении на ссылку - .menu li:hover img - картинка отъезжает влево - left:375px; и становится видимой - opacity:1; чтобы добиться плавности этого эффекта, добавлена анимация - transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out; Вот собственно и все. Надеюсь, объяснил понятно.

Данное меню написано полностью на html+css3 и не содержит javascript. Работает в Google Chrome, Opera, Mozilla FireFox и Internet Explorer 10. Internet Explorer 9 не поддерживает анимацию, но тем не менее, меню в нем все равно смотрится прилично.