Vertical Drop Down Menu To Blogger

This menu is highly customizable so that you can easily customize this menu and create your own style which suits to your blog,to customize it use our HTML Editor where you can see live preview of your menu when you applied the changes,also the HTML structure of this menu is damn easy and simple,no need to add any class of id you can add your links with using normal ul and li tags.

See Demo With HTML Editor

Note - Paste all below code in HTML Editor and hit preview button,if you want to customize this menu then change the CSS values and again hit the Preview button.Now lets see hot to add it to blogger blogger blog.

How To Add Vertical Drop Down Menu To Blogger

1. Go to Blogger Dashboard > Layout
2. Click Add a Gadget
3. Select HTML/JavaScript
4. Paste below code in it,

<style>
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
.ddsmoothmenu-v ul {
    margin: 0;
    padding: 0;
    width: 250px;
 /* Main Menu Item widths */
    list-style-type: none;
    font: bold 12px Verdana;
    border-bottom: 0px solid #ccc;
}

.ddsmoothmenu-v ul li {
    position: relative;
}

.downarrowclass {
    position: absolute;
    top: 12px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 10px;
    right: 5px;
}
    /* Top level menu links style */
.ddsmoothmenu-v ul li a {
    display: block;
    overflow: auto;
        /*force hasLayout in IE7 */
    height: 32px;
    color: white;
    text-decoration: none;
    padding: 5px 5px 5px 25px;
    border-bottom: 0px solid #778;
    border-right: 0px solid #778;
}

.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJkK96d_n-1hIx8zDrr87MLQtTjyCBNRv6R1m9RQGAF8FDAW0kZ1z48PVlTbjp6IhfO3M1YLkZZJ1LhYQOkelcyCg6RKgLWwiGEU9okHa5_tdNWUO11sagBkBxu6_Z3BzOr1G86CW8SA/s1600/tab_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
    margin-bottom: 1px;
}

.ddsmoothmenu-v ul li a.selected {
        /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBJeFQrbNfsaYyjZ0mNRE7453ENAHrZi_UYa_vOE6JyBa_nco0S9cL8aPFHMwuR1sAcqzuVkzAcUOFwos6nh-yKchOfdOKDVolWgav90mPwfZ_S8mg9Yo0wArxBXlpc-q0dE3YuszPKY/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}

.ddsmoothmenu-v ul li a:hover {
    color: white;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBJeFQrbNfsaYyjZ0mNRE7453ENAHrZi_UYa_vOE6JyBa_nco0S9cL8aPFHMwuR1sAcqzuVkzAcUOFwos6nh-yKchOfdOKDVolWgav90mPwfZ_S8mg9Yo0wArxBXlpc-q0dE3YuszPKY/s1600/tabhover_bg.gif);
    height: 22px;
    background-repeat: repeat-x;
    background-position: left center;
}
    /*Sub level menu items */
.ddsmoothmenu-v ul li ul {
    position: absolute;
    width: 170px;
        /*Sub Menu Items width */
    height: 22px;
    top: 0;
    font-weight: normal;
    visibility: hidden;
}
    /* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li {
    float: left;
    height: 1%;
}

* html .ddsmoothmenu-v ul li a {
    height: 1%;
}
/*======= Vertical Drop Down Menu By Helper Blogger ========= */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script>
<script type="text/javascript">
    })
</script>
<script type="text/javascript">
    ddsmoothmenu.init({

        mainmenuid: "smoothmenu2",
        //Menu DIV id
        orientation: 'v',
        //Horizontal or vertical menu: Set to "h" or "v"
        classname: 'ddsmoothmenu-v',
        //class added to menu's outer DIV

        //customtheme: ["#804000", "#482400"],
        contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
</script>
<div id="smoothmenu2" class="ddsmoothmenu-v">
     <ul>
        <li>
            <a href="http://www.helperblogger.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.helperblogger.com/">Create This</a>
        </li>
    </ul>
    <br style="clear: left" />
</div>

• To change the width simply edit the value width: 250px;
• If you have already added a jQuery plugin to your blog then remove the code highlighted in faint green color.
  
• Replace # with your own links
• Replace Sub Item 1,Sub Item 2..... and on with the text which you want to appear on the menu.