Animated CSS3 Navigation Menu For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

First of all i just wanna tell you that i'am working on my first blogger template and i hope to publish it soon on our blog for you all to download.....OK so it's time to give you one for acually two more amazing css3 menu , both are way to much awesome and yea i'am using it on my blogger template and as i wrote that i'll publish it later.

Installing :

• Go To Blogger > Layout > HTML/JavaScript > Post following HTML :

<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>

• Just below above html code post any of these CSS code , both are different :

Code 1 :

<style>
#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2vTKrQi2f_IlCzzPQ2f2OIAg6Au7Kcuy7z8joh-Gd8VXj-wXZBZnB2S2sn8o7SGyiA_aWJKAkMSb2S70l5oxfPGniQTnoiJWhxhSrGOy5zlITRa8m0NwgIinKA7LSjPJ7huRpY5bwMI/s1600/menubg.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;          
}
</style>

Code 2 :

<style>
#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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2vTKrQi2f_IlCzzPQ2f2OIAg6Au7Kcuy7z8joh-Gd8VXj-wXZBZnB2S2sn8o7SGyiA_aWJKAkMSb2S70l5oxfPGniQTnoiJWhxhSrGOy5zlITRa8m0NwgIinKA7LSjPJ7huRpY5bwMI/s1600/menubg.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;
}
</style>

That’s it! I hope you enjoyed these navigation menu.

Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.