A Simple And Effective jQuery Powered Drop Down Menu For Blogger

I got lots of requests from this blog readers of how to add a simple but more effective Menu navigation bar in blogger blog.There are literally thousands of drop down menu navigation bar for blogger on lots of blogs but all of these navigation menu bar's requires lots of coding's and steps.So just for our readers i have something that is very easy to implement, add links to and customizable.The new menu which i choose will have all the features like, Clean design, simple adding links, with a jQuery powered drop down effect.

Some time ago i visited a site where i see this navigation menu but now i make some changes in this navigation bar so it will work on the newer Template designer also.I also added z index so the drop down menu will display over content and some rounded corners that will be visible in all biggest browsers such as Firefox, Google Chrome, Safari you can see a live demo below.

Adding Simple Drop Down Navigation Menu Bar

First Backup your template before changing or editing your Blog's HTML - How to Backup your Blog's Template

Step 1.) In your Blogger Dashboard Click On Design > Edit HTML

Step 2.) Now find the following piece of code in Your Blog's HTML (Click CTRL + F to search bar for searching code easily)

</head>

Step 3.) Now Copy and paste the following code Directly Above/Before </head>

<!--start drop menu-->
<style type='text/css'>
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;

background: #0033CC; /*MENU MAIN BACKGROUND COLOR*/

-moz-border-radius: 6px;-webkit-border-radius: 6px;

padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;

color: #EAFFED; /*MENU LINK COLOR*/

white-space: nowrap}


#jsddm li a:hover
{ background: #24313C /*MENU HOVER BACKGROUND COLOR*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}


#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
z-index:100;
visibility: hidden;
border-top: 1px solid white}


#jsddm li ul li
{ float: none;
display: inline}


#jsddm li ul li a
{ width: auto;

background: #BFCFFE; /*MENU DROP DOWN BACKGROUND COLOR*/

color: #24313C /*MENU DROP DOWN LINK COLOR*/

}


#jsddm li ul li a:hover
{ background: #809FFE /*MENU DROP DOWN HOVER BACKGROUND COLOR*/}
</style>




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;


function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}


function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}


function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}


function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}


$(document).ready(function()
{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);
$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});


document.onclick = jsddm_close;
</script>
<!--end menu code-->

Note: If the color's of this menu bar doesn't match with your blog's color so you are easily able to change the colors i have highlighted the colors used you can change these by using a different color code.You can find the color codes in our color code chart page.

Note 2: If you don't like the rounded corners of this navigation bar then you are able to remove these rounded corners by removing the both 2 codes highlighted in Red color.

Step 4.) Save your template now.

Now the adding of Css and jQuery  in your blog is complete and the next step is to add HTML for your menu.

Now go to your blog's Design/Layout page and add a Cross column gadget in your blog below header gadget for adding the Navigation bar below header of your blog.

Adding The HTML Tag In Blogger Cross Column Gadget

In your Blog's Page Click Add a Gadget > Choose HTML/Javascript > Copy and paste the following code into the HTML/Javascript gadget.

<ul id="jsddm">
<li><a href="/">Home</a>
<li><a href="#">Link One</a>
<ul>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
<li><a href="#">Link One Sub</a></li>
</ul>
</li>
<li><a href="#">Link Two</a>
<ul>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
<li><a href="#">Link Two Sub</a></li>
</ul>
</li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</li></ul>

This is the code which you use for adding links in your tabs now replace the "#" tag with links of your pages and the text with your text.If you want to add some more links in your navigation menu then do the same way, take a few minutes to look at the layout of the code will see how it works.

Drop your comments and questions below.