Menu
show-notice
hide-notice

Animated CSS3 Navigation Menu

on 22 December 2011

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.

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

3 comments:

  1. how to make animation like your categories on this blog..

    ReplyDelete
    Replies
    1. it's easy bro you should learn css3 which is damn easy just go to w3school.com :) btw m not the owner of this blog :) just a guest

      Delete
  2. how i include it blogger please tell me details?

    ReplyDelete

Important -Comments with Links will be deleted immediately upon our review and If you are asking a question click the 'Subscribe By Mail' link below the comment form to be notified of replies.