Как оживить ваше меню при помощи CSS3

23.01.2012 00:00

Этой статьей мы начнем новый цикл статей под названием "Полезные советы", в котором мы представим несколько быстрых и интересных методов для веб-разработки и веб-дизайна. Сегодня мы покажем вам, как "оживить" ваше меню, добавив симпатичный эффект при наведении на него. Идея заключается в перемещении изображения вправо, когда курсор мыши находится над пунктом меню.

Каждый пункт меню (а это неупорядоченный список в данном случае) будет иметь ссылку, содержащую два тега span и фотографию:

<ul class="mh-menu">

 <li>

 <a href="#">

 <span>Art Director</span>

 <span>Henry James</span>

 </a>

 <img src="images/1.jpg" alt="image01"/>

 </li>

 <!-- ... -->

</ul>

Мы зададим для .mh-menu li a свойство display:block и rgba(255 255 255, 0,8) в качестве фона. Когда мы наводим курсор мыши на элемент списка, мы будем изменять цвет фона на rgba(225 239 240, 0.4) - это голубой цвет:

.mh-menu li:hover a{

 background: rgba(225,239,240, 0.4);

}

Второй тег span будет также менять свой цвет при наведении мыши, но мы хотим установить каждому элементу свой цвет. Таким образом, мы добавим цветовой переход и получим каждый элемент при помощи селектора nth-child:

.mh-menu li a span:nth-child(2){

 /*...*/

 transition: color 0.2s linear;

}

.mh-menu li:nth-child(1):hover span:nth-child(2){

 color: #ae3637;

}

.mh-menu li:nth-child(2):hover span:nth-child(2){

 color: #c3d243;

}

.mh-menu li:nth-child(3):hover span:nth-child(2){

 color: #d38439;

}

.mh-menu li:nth-child(4):hover span:nth-child(2){

 color: #8e7463;

}

Изображение будет скользить в правую сторону, так что, на начальном этапе, оно будет иметь значение left равное 0px. Мы также добавим переход для его прозрачности, она будет изменяться от 0 (начальное значение) до 1:

.mh-menu li img{

 position: absolute;

 z-index: 1;

 left: 0px;

 top: 0px;

 opacity: 0;

 transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

}

.mh-menu li:hover img{

 left: 300px;

 opacity: 1;

}

И вуаля, у нас есть хороший slide-эффект!
Убедитесь, что z-index ссылки установлен более высоким, чем для изображения, чтобы оно скользило под ссылку, а не поверх её.

Кроме этого, мы можем сделать чтобы цвет фона ссылки становился непрозрачными при наведении, то есть полностью белым (демо 2), или цвет каждого дочернего элемента различался (демо 3).

Иллюстрации в демо Bartosz Kosowski (CC BY-NC 3.0).