A Simple Drop-Down Menu Using Jquery

The last two drop down menu tutorials on this blog use background images in the menu-tabs, and hence it is not so easy to customize them for your blogs. So here’s a new widget code, in which you can easily change the colors of the menu so as to match with your blog.

A Simple Drop-Down Menu Using Jquery

Live demo can be seen here:
Demo1: ClubVista Blogger Template (In Green)
Demo2: JavaScript-Array (In Blue) (Widget author’s blog)

To add a widget similar to these, follow these steps:

STEP1:
Log in to Blogger, go to “Layout” -> “Edit HTML

STEP2:
Now find this code:

</head>

and immediately BEFORE/ABOVE it, paste this code:

<!–jquery-DD-Menu-Starts–>
<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: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

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

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

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}
</style>

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

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

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(‘visibility’, ‘hidden’);}

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

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

$(document).ready(function()
{ $(‘#jsddm > li’).bind(‘mouseover’, jsddm_open);
$(‘#jsddm > li’).bind(‘mouseout’, jsddm_timer);});

document.onclick = jsddm_close;
</script>
<!–jquery-DD-Menu-Stops-http://bloggerstop.net–>

Now before you save the template, make these changes in the code :

A Simple Drop-Down Menu Using Jquery

To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to “Layout” -> “Page Elements
and click on “Add a Gadget“, select it as “HTML/JavaScript” type

and finally paste this code in to the new widget:

<!–BODY-CODE–>
<ul id=”jsddm”>
<li><a href=”#”>JavaScript</a>
<ul>
<li><a href=”#”>Drop Down Menu</a></li>
<li><a href=”#”>jQuery Plugin</a></li>
<li><a href=”#”>Ajax Navigation</a></li>
</ul>
</li>
<li><a href=”#”>Effect</a>
<ul>
<li><a href=”#”>Slide Effect</a></li>
<li><a href=”#”>Fade Effect</a></li>
<li><a href=”#”>Opacity Mode</a></li>
<li><a href=”#”>Drop Shadow</a></li>
<li><a href=”#”>Semitransparent</a></li>
</ul>
</li>
<li><a href=”#”>Navigation</a></li>
<li><a href=”#”>HTML/CSS</a></li>
<li><a href=”http://bloggerstop.net”>Blogger Help</a></li>
</ul>

And save the widget.

Leave a Reply

255 Comments on "A Simple Drop-Down Menu Using Jquery"

Notify of
avatar
Sort by:   newest | oldest | most voted
CrakerLo
Guest

sai, i dun hav !–jquery-DD-Menu-Starts–
this code, how?

View Comment
Divya Sai
Guest

oops sorry, that line is a typo, you only have to find this one:

</head>

View Comment
CrakerLo
Guest

erm.. the drop down is not working how? teentcm.blogspot.com

View Comment
CrakerLo
Guest

erm.. no nid to check my blog edi, i change another

View Comment
DA
Guest

It doesn’t work =(
http://test-da.blogspot.com/
whats’ wrong?(

View Comment
Divya Sai
Guest

Hi DA,
your test blog is not open to public, anyways i think there might be some code conflict with your template, same with CrakerLo’s blog…..

why don’t you try it in your other blogs ?

@ CrakerLo, and DA,
Well i can suggest you two to use other drop-down menus described in this blog…

Regards
Sai

View Comment
LiquidSilver
Guest

lol, played with the code and finally succeed placing it on the top of my blog, but the problem is it is not centered and how do i add links to it??can you help me?i need guides.
heres the blog:
http://hit-liquidsilver.blogspot.com/

View Comment
Divya Sai
Guest

Paste the second code in between center tags, like this:

<center>SECOND CODE HERE</center>

Replace the all "#" in the code above with links like http://google.com or http://bloggerstop.net

That's it !

View Comment
Ambara Putra
Guest

Hi Div, I like this post. I tried to do that to my blog with all the steps you have posted, but it appears just the text.Could I’ve been missing some steps?

View Comment
Divya Sai
Guest

@ Ambara and Everybody,

There was a small error in the code, and hence it wasn’t working for you people, I have just corrected it, please try it and tell me if it works for you now!

View Comment
Henry Juarez Vargas
Guest

The error is in the last style:

#jsddm li ul li a:hover
{ background: #8EA344

you have tu complete with a bracket like this }

so the correct code will be:

#jsddm li ul li a:hover
{ background: #8EA344 }

😀

View Comment
Divya Sai
Guest

Thanks for telling that Henry !
I have corrected the post now…

Regards
Sai

View Comment
Ambara
Guest

thanks Divya I got it. It is owesome

View Comment
Divya Sai
Guest

Welcome Ambara !

View Comment
Nikhil
Guest

Excellent Post! Very Very helpful. Dropdown working fine. 🙂

View Blog http://www.iexcogitate.blogspot.com

View Comment
Divya Sai
Guest

Wow…neat work Nikhil !

Regards
Sai

View Comment
Shivani
Guest
Divya Sai
Guest

Welcome Shivani…

View Comment
!i! KSAK !i!
Guest

thanks.its awesome and working very well
🙂

View Comment
kashif salman
Guest

hi i have tried the codes.it worked but got a problem that is it hides behind the main header picture, if i change its position it still hides behind the post area. please help me out.

View Comment
wpDiscuz