Как разнообразить меню с помощью CSS3

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



    
        
            Art Director
            Henry James

Зададим классу .mh-menu блочное отображение и зададим цвет фона rgba(255,255,255, 0.8). При наведение на элемент списка зададим светло-синий цвет(225,239,240, 0.4).


li:hover a{
background: rgba(225,239,240, 0.4);

}

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


li a span:nth-child(2){
/*...*/
transition: color 0.2s linear;

}
li:nth-child(1):hover span:nth-child(2){
color: #ae3637;

}
li:nth-child(2):hover span:nth-child(2){
color: #c3d243;

}
li:nth-child(3):hover span:nth-child(2){
color: #d38439;

}
li:nth-child(4):hover span:nth-child(2){
color: #8e7463;

}

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


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;

}
li:hover img{
left: 300px;
opacity: 1;

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

В качестве альтернативы, можно сделать, чтобы цвет фона якоря становился непрозрачным при наведении, то есть белым (второй пример) или был различным для каждого пункта (третий пример).

В демонстрации используются иллюстрации Bartosz Kosowski (CC BY-NC 3.0).

Источник урока