Css3 Smooth Slideout Menu Bar For Blogger 2013

   Live Demo

How to use Menu Bar Widget :

1. Log in to blogger account and Click drop down. 
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.                                                                                                              
5. Find this tag by using Ctrl+F    ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag 

Css Style Code : 

/* The CSS Code for the menu starts here digitalhubinc.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;
}

7. Go to blogger and click Layout 
8. Click Add Gadget and select 'HTML/Javascript
9.Paste below code.

HTML Navigation menu Code :

<ul class="nav8">
        <li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <ul class="sub">
                <li><a href="http://www.digitalhubinc.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.digitalhubinc.com/search/label/CSS"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.digitalhubinc.com/search/label/CSS"><b>Support</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.digitalhubinc.com/search/label/CSS"><b>About</b><p>custom description here</p><i></i></a></li>
                <li><a href="http://www.digitalhubinc.com/search/label/CSS"><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.

10. Now save your 'HTML/Javascript'.

End.