In this new category called “Tips and Tricks” we will introduce some
quick and interesting methods around web development and web design. In
today’s tip we’ll show you how to spice up your menu by adding a neat
hover effect to it. The idea is to slide an image out to the right when
hovering over a menu item.
Each menu item (which is a unordered list item in this case) will have an anchor containing two spans and an image:
Код
<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>
We’ll give .mh-menu li a display block and rgba(255,255,255, 0.8) as background color. When we hover over a list item, we’ll color the
background into rgba(225,239,240, 0.4) which is a light blue:
Код
.mh-menu li:hover a{
background: rgba(225,239,240, 0.4);
}
The second span will also change its color on hover, but we want to change each item into a different color. So, we’ll add a color
transition and get each different element with the nth-child selector:
Код
.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;
}
