Add Smooth Jquery Multi Level Drop Down Menu To Blogger

Drop down menus helps your readers and visitors to easily navigate through your blog's important links or categories.I hope this drop down menu will surely help you to organize your links,categories and sub-categories easily.This script for this menu was taken from dynamicdrive and bloggerized by Helper Blogger.In order to create smooth hover effect this use jQuery. The arrange of HTML is damn easy so that you can customize this menu very easily.

Update: Demo Added
Live Menu Demo

Play With Menu 

Copy and paste whole below code in 1st text box of HTML Editor and hit preview button.

How To Add This Menu To Blogger?

• Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
• Click on add a gadget link just below of Header (see image below)

• Paste below code and save it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://helperblogger.ucoz.com/code/hb-smooth-menu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

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>

<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

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

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>

<div id="smoothmenu1" class="ddsmoothmenu">
<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>

Customizations

• To change background of menu find this #414141 code tow times and replace this code two times.
• To change font size and font family fing this code font: bold 12px Verdana; 
• To add a link in menu use <li>
• To add a sub-link use <ul>.
• Replace the # symbols with page links
• Replace the Sub Item 1.1 with Page Titles

For making color changes you can use our Hex Color Code Generator.

Help

If you need any help on customizing and adding this menu to your blog then ask it to me.I will explain you in brief as soon as time allows.I hope you will surely like this menu.