Stylish Vertical Drop Down Menu for Blogger

Various types of Menus are available for adding to blogs and websites. Menu plays vital role in categorizing the content based topics and crafts easy way to browse visitors/readers to get information instantly instead of browsing on search bar. Here, BlogTariff brought you “Stylish Vertical Menu Bar” based on script ddsmoothmenu for adding to blogger. HTML based code can customizable by replacing links in easy way in own style or design to attract more visitors/readers to blogs. BlogTariff always a head in presenting simple ways to their valuable readers to execute on blogs.

How to Add Vertical Drop Down Menu for Blogger?

Sign into your blogger account
Click on “Desgin (Layout in the new blogger interface) Page elements”
Click on “Add a Gadget”
Then Select “HTML/Javascript” widget
Now copy the below code and paste in it

<style> /*======= Vertical Drop Down Menu By Blog Tariff ========= */ .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/AVvXsEhhG3yYOJbujTLxvQtwc6OLkxtuCfO99toeuoJJdPcPQxdSuotMXkp39g_r7rlp9XLX1ZmZc7GWZDJU6XdWL_faQCV8WQeQ8i4HgUScttPPWQ7-9P5Qv212SDrYNx2UOR0hEvNgspgczs4/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/AVvXsEiBBqP_ruIkMEwKWsLMO3X2C67MWLvcWBsH8jWQpW1-dIEiE6S0S5p5Os50NrkvBltt-D8wL_jNsj3fkmF7AI4SeZnf2KaF-tRLEVoiIToXCkHUqL_e2KlQvUdmBz9KVGE-czyHORyVNuY/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/AVvXsEiBBqP_ruIkMEwKWsLMO3X2C67MWLvcWBsH8jWQpW1-dIEiE6S0S5p5Os50NrkvBltt-D8wL_jNsj3fkmF7AI4SeZnf2KaF-tRLEVoiIToXCkHUqL_e2KlQvUdmBz9KVGE-czyHORyVNuY/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 Blog Tariff ========= */ </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src=" http://blogtariff.googlecode.com/files/btf-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.blogtariff.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.blogtariff.com/">Create This</a> </li> </ul> <br style="clear: left" /> </div>

Modifications:

• Replace the “width: 250px;" with your value
• Go to “Edit HTML’ link tab and search for code
• If finds this code <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
• Then remove it from the above code or else paste the same whole HTML code as highlighted.
• Change # with your own links
• Change Sub Item 1, Sub Item 2 and related items with your page links (Labels or categories name links).

If you need any Assistance in this regard to edit the code use our Online HTML EDITOR Tool for best results.
If you feel any difficulty in pasting the above code bring to us we try for your.
If you enjoyed this article and helped little bit let know us via comments.