Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Давайте сразу перейдем к руководству, в котором расскажем вам о том, как придать изюминку обычному меню навигации за счет привлекательного эффекта при наведении. Идея заключается в том, чтобы выдвигать изображение вправо, когда курсор мыши наведен на один и пунктов меню.
Каждый пункт меню (которые в данном случае являются пунктами неупорядоченного списка) будет иметь анкор, содержащий два 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 будет обозначен параметром 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 будет иметь значение в 0 пикселей. Мы также добавим переход к уровню плотности отображения. Он будет анимирован с 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;
}
И, вуаля! Наш эффект уже готов!
Убедитесь, что в параметре z-index у анкоров установлено значение выше, чем у изображения, чтобы изображение скользило под анкорами, а не над ними.
С другой стороны, мы можем сделать так, чтобы цвет фона у анкора становился прозрачным при наведении, то есть полностью белым (смотрите демо 2), либо раскрасить каждый дочерний элемент разными цветами (смотрите демо 3).
Иллюстрации в демо были любезно представлены Бартошем Косовски (Bartosz Kosowski), и распространяются они под лицензионным соглашением CC BY-NC 3.0.