Submit your widget

Awesome CSS3 animation menu

Created 11 years ago   Views 36721   downloads 7882    Author tympanus
 Awesome CSS3 animation menu
View DemoDownload
Share |

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">
        <a href="#">
            <span>Art Director</span>
            <span>Henry James</span>
        <img src="images/1.jpg" alt="image01"/>
    <!-- ... -->

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;

Read more: