Create cool animated menu on hover with CSS3 background-size

Create cool animated menu on hover with CSS3 background-size

With CSS3’s transition property, Web Designers are able to do object transitions, especially for interactive content like navigation menus, without relying on Javascript. In this tutorial, I’m going to show you how you can achieve cool animated menu on hover by using CSS3.

For this tutorial, we will be utilising CSS3’s background-size property as well as transition property, to animate the background image. If you are learning CSS3 and would like to learn this trick, please continue reading to find out how.

Demo

Click here to view the demo.

Browser Compatibility

This effect is viewable on latest Firefox and Webkit browsers like Chrome and Safari. IE9 does not support transition property so it will not have transition animation.

Tutorial

STEP 1
First is to create the image for the rollover effect. All you need is just open a new 1px by 1px canvas as Photoshop, then apply your favorite color. In this example I use the color with the hex code “#d0044c”. Once done, save it as png image.

Create cool animated menu on hover with CSS3 background-size

HTML
Now, launch your text editor which I will be using Dreamweaver for this tutorial. Create a new blank HTML5 file, and insert the standard navigation code like below:


<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">My Blog</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

CSS
Here we enter the core of this tutorial. Here is the essential CSS codes to make this effect works.

nav {
    position: fixed; /* fixed the menu to the left side */
    top:200px;
    left:0;
}
nav a { padding: 8px 20px; margin: 1px 0; display: inline-block;
/* the background image created in first step */ background:url(img/menu-hover-bg.png) no-repeat -1px top rgba(0,0,0,0.2);
/* set background-size to 0 in width but 100% in height */ background-size:0 100%;
/* transition code to animate the hover */ -moz-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
nav a:hover { /* when hover, becomes all 100% */ background-size: 100% 100%; }

FINISH
Well, basically this is it! Just save and preview it in your favorite modern browser. The code above is for menu that sticks to the left, in the demo, I also included another version for horizontal menu bar.

Explanation

With CSS3, we are able to control the background image’s size with the new property called “background-size”. So, at first we include the background image, then set its background size to 0 in width, which will make the image invisible. At the background properties, we also set the background position to -1px to the left to make sure it is hidden completely.

Then, for the :hover state, we set the background size to 100%, to make it fill up the whole link space. The transition properties makes the transition animation of the background image smooth and cool.

Similar Posts:

Comments