Придаем меню особенный вид с помощью CSS3

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

HTML

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

 01          <ul class="mh-menu">

02               <li>   

03                   <a href="#">

04                       <span>Художественный директор</span>

05                       <span>Петр Иванов</span>

06                   </a>             

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

08               </li> 

09               <!-- ... -->

10           </ul>    

CSS

Элемент .mh-menu li a будет выводится как блочный  и с фоном rgba(255,255,255, 0.8). При наведении курсора на пункт списка, мы будем менять цвет фона на rgba(225,239,240, 0.4) (светло-голубой):

1             .mh-menu li:hover a{

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

3             }

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

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

02               /*...*/             

03               transition: color 0.2s linear;

04           }             

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

06               color: #ae3637;           

07           }

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

09               color: #c3d243;

10           }             

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

12               color: #d38439;           

13           }

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

15               color: #8e7463;

16           }             

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

01           .mh-menu li img{

02               position: absolute;

03               z-index: 1;

04               left: 0px;        

05               top: 0px;

06               opacity: 0;

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

08           }             

09           .mh-menu li:hover img{

10               left: 300px;    

11               opacity: 1;

12           }             

И готов интересный эффект!

Убедитесь, что свойство z-index ссылки имеет значение больше, чем у изображения. Чтобы картинка проскальзывала под ссылкой.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/
Перевел: Сергей Фастунов