One of my loyal reader asked me for a vertical drop down menu so that by keeping my word today I am sharing a vertical drop down with using the script of ddsmoothmenu.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(http://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/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(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/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(http://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/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://helperblogger.ucoz.com/code/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.

For further customizations kindly use our HTML Editor so that you can see a live preview of your changes.

I hope you have liked this vertical menu.If you cant customize it as you wish then kindly leave back a comment with your details,also if you can't add this menu perfectly to your blog then leave a comment with your Blog URL.

Post a Comment

  1. very nice ..............brother

    ReplyDelete
  2. I want to change the green color in the box, let me know where i can change it

    ReplyDelete
    Replies
    1. I tried and changed the color, :) the code is working fine in the html editor, but i upload the code in layout->addhtmlscript, its not working properly . am i missing something ?

      Delete
    2. Hi,
      You have to edit background-image: property from the CSS, if you want to add any hex color as a background then the CSS code should be like this background: #cccccc; and if you want any image as a background then background-image: url(IMAGE URL GOES HERE);

      Delete
  3. Please tell me a way to remove shadow of submenus?

    ReplyDelete
  4. Hi Rahul, thanks for this menu
    I installed it with no problems but I want to know if it is possible that some boxes can go below and not just right.
    For example in my test blog - http://rg20103.blogspot.it/- VOCE 2.1 goes right VOCE 2 but I would like it go below it, can you ?
    Then I wanted to know how to eliminate side arrows.
    Thank you very much and sorry for the horrible English

    ReplyDelete
  5. Thanks bro..it is simple and easy way of adding menu

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top