Css3 Smooth Slideout Menu Bar For Blogger

{[["☆","★"]]}

[tintuc]With this article, I will share with you a very useful tips. It's "Smooth CSS3 Slideout Menu Bar For Blogger". It is using CSS3 and HTML for creating this widget. It is very light for your blog.

1. Login to your Blogger account
2. Click Template
3. Select Edit HTML
4. Find (Ctrl F) & Insert the below CSS code just before ]]></b:skin>

/* The CSS Code for the menu starts here bloggertrix.com */
ul.nav8 {
list-style:none;
height:120px;
margin:0;
padding:0;
}

ul.nav8 table {
border-collapse:collapse;
width:0;
height:0;
margin:-1px 0 -5px -1px;
}

ul.nav8 > li {
float:right;
height:120px;
width:40px;
position:relative;
overflow:hidden;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
-o-transition-duration:.5s;
}

* html ul.nav8 > li {
width:auto;
}

ul.nav8 > li a.ie6 {
float:left;
height:120px;
width:39px;
position:relative;
overflow:hidden;
}

ul.sub {
list-style:none;
height:120px;
width:600px;
background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}

ul.sub li {
float:left;
}

ul.sub li:first-child {
margin-left:45px;
}

ul.sub li a {
display:block;
width:110px;
height:120px;
float:left;
overflow:hidden;
position:relative;
text-decoration:none;
color:#000;
}

ul.sub li a b {
font-size:14px;
display:block;
padding:15px 15px 5px;
}
ul.sub li a b:hover {
font-size:16px;
color:#FF0000;
display:block;
padding:15px 15px 5px;
}
ul.sub li a p {
font-size:12px;
display:block;
margin:0;
padding:0 10px;
}

ul.sub li a p:hover {
font-size:13px;
display:block;
margin:0;
padding:0 10px;
}

ul.nav8 > li:hover {
width:600px;
}

ul.nav8 > li a.ie6:hover {
direction:ltr;
width:600px;
}

ul.sub li a:hover i {
opacity:1.0;
}

5. Save the template and return to the Layout
6. Click Add Gadget, select HTML / JavaScript and add the below code

<ul class="nav8">
<li>
<!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#"><b>Home</b><p>custom description here</p><i></i></a></li>
<li><a href="#"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
<li><a href="#"><b>Support</b><p>custom description here</p><i></i></a></li>
<li><a href="#"><b>About</b><p>custom description here</p><i></i></a></li>
<li><a href="#"><b>Back</b><p>custom description here</p><i></i></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

Replace # with your links.

7. Now save your HTML/Javascript'.

You are done...

Source: bloggertrix.com[/tintuc]