A SIMPLE STYLE jQUERY POWERED DROP DOWN MENU

As per the choice of user our team had introduced a simple style, easy to use drop down menu for blogger. There are many drop down menu which had various function but our users had demanded for simple drop down menu that is easy to implement, add links and customize and there request is completed.

We have also added  z-index to the drop down menu so it will display over content and some rounded corner that will be visible on browser that supports them such as Firefox, Google chrome and safari. This new drop down menu is the best of all i have ever seen.

ADD THE SIMPLE DROP DOWN MENU 

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE
</head>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste the following code just above/before the code you have searched.

<!--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: 10px 20px;
text-decoration: none;
border-right: 1px solid white;
width: 125px;

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----pcleaks.blogspot.com---->


NOTE :- You can also change the color and size by changing the above underlined code


5). Save your template and go to page elements.

6). Add a full width cross coloumn gadget HTML/Javascript and paste the given code inside it. HOW TO ADD A FULL WIDTH CROSS COLOUMN 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>


Make changes accordingly, replace # with the links and text with the text.
If you got a good experience than leave comments and Email Me for any assistance.