Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
We all know power of HTML5 and CSS3 , so today i'am posting about a cool HTML5 and CSS3 menu for your blogger and sites. Again wanna remind you that you can all use this menu in wordpress , sites and all type of HTML documents.
- Go to Blogger > Layout > Add A Gadget > HTML/Javascript
- Paste following code in it
<style>
.main-ul li {
float:left;
list-style: none;
position:relative;
width:25%;
text-align:center;
}
.main-ul li a {
display:block;
padding-bottom:20px;
padding-right:10px;
padding-top:10px;
padding-left:10px;
text-decoration:none;
position: relative;
z-index: 100;
background-color: rgba(164, 164, 164, 0.2);
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.main-ul li a span{
display:block;
padding-top:10px;
font-weight:700;
font-size: 20px;
color: rgba(120, 120, 120, 0.9);
text-transform:uppercase;
font-family: 'Kotta One', serif;
}
.main-ul li:hover span{
color: #fff;
}
.main-ul li:nth-child(1):hover a{
background-color: rgba(175,54,55,0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul li:nth-child(2):hover a{
background-color: rgba(199, 204, 73, 0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul li:nth-child(3):hover a{
background-color: rgba(213, 135, 11, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.main-ul li:nth-child(4):hover a{
background-color: rgba(51, 143, 144, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.main-ul li:nth-child(5):hover a{
background-color: rgba(117,18,98,0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul li:nth-child(6):hover a{
background-color: rgba(33, 136, 215, 0.8);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul li:nth-child(7):hover a{
background-color: rgba(109, 109, 109, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.main-ul li:nth-child(8):hover a{
background-color: rgba(152, 120, 92, 0.8);
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
</style>
<ul class="main-ul">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Article</span></a></li>
<li><a href="#"><span>Blog</span></a></li>
<li><a href="#"><span>Gallery</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
<li><a href="http://widcraft.blogpspot.com"><span>Widgets</span></a></li>
<li><a href="#"><span>Templates</span></a></li>
</ul>
- Now just change # with you links and bold text with your titles.....
Need any help or wanna join the dark side then please comment :)
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
