Hello Friends, Today I am publishing two demos of animated css3 navigation , you can also download the both demos.
**********************************First-Demo**************************************
Before Starting, I would like to show you final preview, what we are going to make.
Here are html source code of animated css3 navigation.
Paste this code in html.
<ul id="demo1"> <li><a href="javascript:void">Home</a></li> <li><a href="javascript:void">About Us</a></li> <li><a href="javascript:void">Services</a></li> <li><a href="javascript:void">Products</a></li> <li><a href="javascript:void">Contact Us</a></li> </ul>
Here are css of animated css3 navigation.
Paste this code in css.
Save the css in css folder
nav{margin:0px; padding:0px;}
ul{margin:0px; padding:0px;}
ul#demo1 li{list-style-type:none; float:left; margin:0px; padding:0px; background:url(../images/navi-sep.jpg) no-repeat right top; color:#000;}
ul#demo1 li a{list-style-type:none; color:#333333; text-decoration:none; padding:20px 25px; font:14px Arial, Helvetica, sans-serif; background:url(../images/navi.jpg) repeat-x; color:#fff; -webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease; transition:all 0.3s ease; margin-right:4px; height:15px; display:block;text-transform:uppercase;}
ul#demo1 li:last-child{ background:none;}
ul#demo1 li:first-child a{border-radius:5px 0 0 5px;}
ul#demo1 li:last-child a{border-radius:0 5px 5px 0;}
ul#demo1 li a:hover, ul#demo1 li a.act{background:url(../images/navi.jpg) repeat-x 0 -55px; color:#fff;}
Images using in Navigation.
Save images in images folder
**********************************Second-Demo**************************************
Now, we are going to make second demo, in first demo we made the navigation by using background image but in second demo we are going to make navigation with background color and with new effect.
Here are html source code of animated css3 navigation.
Paste this code in html.
<ul id="demo1"> <li><a href="javascript:void">Home</a></li> <li><a href="javascript:void">About Us</a></li> <li><a href="javascript:void">Services</a></li> <li><a href="javascript:void">Products</a></li> <li><a href="javascript:void">Contact Us</a></li> </ul>
Here are css of animated css3 navigation.
Paste this code in css.
Save the css in css folder
nav{margin:0px; padding:0px; text-align:center;}
ul{margin:0px; padding:0px;}
ul#demo1 li{list-style-type:none; float:left; margin:0px; padding:0px; background:url(../images/navi-sep.jpg) no-repeat right top; color:#000;}
ul#demo1 li a{list-style-type:none; color:#333333; text-decoration:none; padding:20px 25px; font:14px Arial, Helvetica, sans-serif; background:url(../images/navi.jpg) repeat-x; color:#fff; -webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease; transition:all 0.3s ease; margin-right:4px; height:15px; display:block;text-transform:uppercase;}
ul#demo1 li:last-child{ background:none;}
ul#demo1 li:first-child a{border-radius:5px 0 0 5px;}
ul#demo1 li:last-child a{border-radius:0 5px 5px 0;}
ul#demo1 li a:hover, ul#demo1 li a.act{background:url(../images/navi.jpg) repeat-x 0 -55px; color:#fff;}
Hello Friends, if you like this article or having any suggestion, please don’t forget to leave the comment.
