Animated CSS3 Navigation Menu

In this tutorial i'm going to show you, create an animated CSS3 navigation menu. In the earlier we mentioned a lot of navigation menu tutorial and the all navigation menu tutorial are successful. Here two navigation menu and two menu as a animated navigation menu using CSS3 transition property. Just using the background image to move left to right and second navigation menu top to bottom. After seeing the demo of this navigation menu, you will be understand what is the different between two navigation menu. Of course some website are giving animated navigation menu tutorial and they animating the menu using javascript, but here we not like that, just using CSS3 transition.

Live Demo Download

The HTML

The HTML structure for the menu will be an unordered list with id as "menu". You can customize or add more link.

<ul id="menu">                 
<li><a href="#">Home</a></li>                 
<li><a href="#">Products</a></li>                 
<li><a href="#">Services</a></li>                
<li><a href="#">About</a></li>                 
<li><a href="#">Contact</a></li>             
</ul>

CSS code for Example 1

Now we want add life into this menu by adding CSS and it will animate the menu.

#menu li {                 
display: inline;                 
list-style: none;                 
padding: 0;             
}                          
#menu li a {                                  
border: 1px solid #3d8bf2;                
padding: 15px 20px 15px 20px;                 
text-decoration: none;                 
font-family: arial;                 
color:#fff;                 
margin-left: -5px;                 
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');                 
background-position: left;                 
-webkit-transition: all 0.7s ease-in-out;               
-moz-transition: all 0.7s ease-in-out;                 
-o-transition: all 0.7s ease-in-out;             
}                          
#menu li a:hover {                 
background-position:right;            
} 

CSS code for Example 2

#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg2.PNG');
background-position: bottom;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#menu li a:hover {
background-position:top;
}

That’s it! I hope you enjoyed these navigation menu.
Note: These Animated CSS3 Navigation Menu work only on webkit supporting browsers, mozila and opera...

SHARE

Tweet