CSS3 Smooth Vertical Menu For Blogger Blog

The menu tabs / drop down menus are most important part of blog and websites. With the help of menu tabs visitors can easily find your other content. In this tutorial, I'm going to share how to add vertical drop down menu for your blogger blog. Your readers will feel the 3D taste after adding this menu tab widget.

First of all check live demo and screenshot. You can add post links, pages or categories link etc. Let's start the tutorial:


Live Demo
You May Like To Read:

• Create Drop Down Dark Style Menu In Blogger Blog
• Multi Color CSS3 Navigation Menu For Blogger Blog
• CSS3 Drop Down Menu Without Any Scripts And Images

How To Add CSS3 Smooth Verticle Menu

• Go To Blogger Dashboard >> Template >> Edit HTML >> Proceed
• Press Ctrl+F  and Find  ]]></b:skin>
• Paste Below Code Before ]]></b:skin> Tag

#nav12,#nav ul {
    background-color: #8899AA;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav12 {
    display: block;
    padding: 5px;
    position: relative;
    width: 112px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -webkit-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
}
#nav12 ul {
    left: -9999px;
    opacity:0;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    top: -9999px;
    -moz-transform: rotateY(70deg);
    -ms-transform: rotateY(70deg);
    -o-transform: rotateY(70deg);
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav12 li {
    background-color: #FFFFFF;
    position: relative;
}
#nav12 > li {
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#nav12 li a {
    background-color: #AABBCC;
    border-color: #DDDDDD #555555 #555555 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    display: block;
    font-size: 15px;
    padding: 8px 10px 8px 5px;
    text-decoration: none;
    width:95px;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#nav12 li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
    color: #FFFFFF;
}
#nav12 li:hover ul.subs {
    left: 114px;
    opacity:1;
    top: 0;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#nav12 ul li {
    width: 100%;
}

• Save Your Template and Follow Next Steps 
• Go To Blogger Dashboard >> Layout >> Click Add Gadget >> HTML/Javascript
• Paste Below Code In It.

<div class="container">
    <ul id="nav12">
        <li><a href="http://www.blogsdaddy.com">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul class="subs">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li><a href="#">Submenu 5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="subs">
                <li><a href="#">Submenu 2-1</a></li>
                <li><a href="#">Submenu 2-2</a></li>
                <li><a href="#">Submenu 2-3</a></li>
                <li><a href="#">Submenu 2-4</a></li>
                <li><a href="#">Submenu 2-5</a></li>
                <li><a href="#">Submenu 2-6</a></li>
                <li><a href="#">Submenu 2-7</a></li>
                <li><a href="#">Submenu 2-8</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul class="subs">
                <li><a href="#">Submenu 3-1</a></li>
                <li><a href="#">Submenu 3-2</a></li>
                <li><a href="#">Submenu 3-3</a></li>
                <li><a href="#">Submenu 3-4</a></li>
                <li><a href="#">Submenu 3-5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
        <li><a href="http://www.blogsdaddy.com.com">Get This</a></li>
    </ul>
</div>

Remember Notes: Replace # with your links. Replace red highlighted titles with your own.

• Now Save Your HTML/Javascript Gadget and Its All Done.

I hope you like this CSS3 Smooth Verticle Menu widget. You can add this widget easily but if you have any problem then ask via comments.Stay Blessed and Happy Blogging :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.