Friday, December 23, 2011

how to make vavigation menu bar on blogspot


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.
                    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.
?
1
2
3
4
5
6
7
<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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#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...
I WISH U A GOOD NAVIGATION MENU
IFU HAVE ANY PROBLEM CONTACT ME:jadeerhassankk@gmail.com
Posted by at 7:11 AM
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)