Sliding JavaScript Dropdown Menu

JavaScript Dropdown Menu

This script has been replaced by a new with multi-level support here.

This lightweight JavaScript drop down menu script (~1.6kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. The markup for the menu including the mouse events looks like the following.

<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Dropdown One</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">Navigation Item 1</a></li>
<li><a href="#" class="underline">Navigation Item 2</a></li>
<li><a href="#" class="underline">Navigation Item 3</a></li>
<li><a href="#" class="underline">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</dl>

You can have as many dropdowns on one page as you like. Just be sure and have a unique naming scheme for each menu (i.e. one-ddheader, two-ddheader, etc). The “look and feel” is fully customizable though the CSS and you can replace the unordered list with any content you like if you are not looking for a menu.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

Click here for a vertical flyout version of this menu.

By Request: Slideup version demo.

Update 4/28/2008 – I have updated the HTML and CSS to use a definition list and an unordered list in lieu of the previous div-based layout. Thanks to Paul and Deigo for the suggestion.
Update 4/28/2008 – Fixed flicker issue in FF2 on Mac and “-1″ error in IE when quickly moving from the menu to the browser. Thanks to Philip and Chris for reporting these.
Update 5/16/2008 – Optimized the code reducing size by ~15%.

Posted by Michael in Design, JavaScript, XHTML on April 27, 2008

Neil

Very good. Thanks very much Michael. I tried it on a page with a couple of mootools snippets and they all got along very well No conflicts.
Keep up the great work!
Paul

Looks very nice! Although I’d rather use a <ul> structure…
http://www.serialblogger.com.ar/ Diego

@Paul, actually, an ul inside and dl it would be perfect

dl
dt Dropdown 1
dd
ul
li Option 1
li Option 2
li Option 3
http://www.leigeber.com Michael

@Paul – The content of the dropdown could easily be an unordered list with little modification. Just switch up the HTML a bit and add the appropriate CSS classes.

@Diego – Excellent suggestion. I definately do recommend using existing HTML tags in lieu of classed divs. I will take a look at incorporating those tags and update the post if I like how it works out. I have never actually used definition lists in any project so it will be new to me. Thanks.
Pingback: roScripts - Webmaster resources and websites
http://www.gotmedia.org/ Steph

HA! That is so funny, a friend of mine just sent me a zipped up javascript menu today..and this is it.

VERY easy to customize, a real treat.
Pingback: Skylog » Blog Archive » links for 2008-04-29
http://bhakthan.blogspot,com Srikanth

Very nice Micheal! Works well in IE and FF!
http://onipresente.eti.br Augusto

Is it hard to make a submenu with this example?
http://www.leigeber.com Michael

@Augusto – Submenu functionality is not incorporated currently as I wanted to keep it as simple as possible for those that did not need them. It wouldn’t be too difficult to add a popout submenu though. You would treat it as if it were its own independent menu and position it in relation to the top level menu selection. Of course you would also need to cancel the timer on the primary menu when you enter the second level menu. Just shoot me an email if you need assistance.
http://www.fatorw.com Walmar

Cool, but… what about keyboard navigation? And submenus? Maybe in 2.0 version
http://www.leigeber.com Michael

@Walmar – Absolutely, I have had a few requests for submenus so I will get that as well as keyboard navigation added in soon so check back shortly.
Pingback: links for 2008-04-29 « toonz
Pingback: アニメーションつきのドロップダウンメニューを
Pingback: StyleCrunch » Blog Archive » Sliding JavaScript Dropdown Menu
peter

Nice work, I hope you are recognized for your efforts. Do you have development on a similar but vertical flyout menu? That would complete the set!
http://www.leigeber.com Michael

@peter – Thank you. I have a few more scripts on my list and will definitely add a flyout menu to it. I am always open to suggestions. Just email me.
Pingback: javascript menü - Volkan Şentürk
http://www.thewebbureau.com hasta

hi

whats the best way to add a top-level item to this nav that doesn’t have a drop-down menu attached?

cheers
hasta
http://www.leigeber.com Michael

@hasta – I helped someone else with this a few days ago. You can see what I demoed to them at http://sandbox.leigeber.com/dropdown2/dropdown.html. Basically you want to create a block link and float it to the left. Shoot me an email if you run into any problems.
http://www.thewebbureau.com hasta

thats great. thanks for the speedy reply
hasta
Pingback: Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog
Gary

How do i sent it to make the menu disply on the right instead of down?
http://www.leigeber.com Michael

@Gary – I have started working on that, hopefully I will finish up in the next couple days. There are a couple issues that make it a little less easy that just changing a couple variables. Feel free to shoot me an email in a couple days if I haven’t posted an update.
Grace

Is there a way to change direction of the slide down javascript menu? If so how do you do that?

Thanks
http://www.leigeber.com Michael

@Grace – I hope to have a vertical menu released tonight or tomorrow. If you are looking for something else let me know.
Pingback: Vertical Flyout JavaScript Menu - Web Development Blog
Todd

WOW this is a great script! Would it be difficult to change it to slide up and with a submenu that could slide up also and overlap? or would that just be too hard to configure?
http://www.leigeber.com Michael

@Todd, I just put together a slide-up version this morning on request at http://sandbox.leigeber.com/dropdown3/dropdown.html. As for the sub-menus, it is definitely on the to-do list. I will shoot you an email when I have it ready.
http://t-brown.co.uk Tom

This is a very nice script i will certanly be using it asap my only concern is accesibility. If the browser dosent support javascript or the user has it turned off the navigation is totaly hidden. I have slightly modified the code to use an onload hide function which solves this. If the comments are removed the modified script is only 1.54kb. Have a look at the modified script @

http://www.t-brown.co.uk/scripts/sliding_dropdown_modified.zip
http://www.leigeber.com Michael

@Tom – Thanks for the feedback. I am big on accessibility and depending on the implementation and requirements it can be handled differently. You could mesh the script along with an onload and the :hover pseudo-class to create a non-animated dropdown when JS is not present, of course that would require browser support for :hover. Alternatively you could just have the main dropdown link something like this… <a href=”link.html” onclick=”function(); return false;”>link</a> where it could link into a top level page or landing page of some sort. Thanks for sharing the zip.
http://t-brown.co.uk Tom

@Michael – No problem hope it can be of some use to others, congrats again on the great script.

p.s. forgot to mention the slight alteration i made to the list css too:

…<li><a href=”#” class=”top”>Navigation Item 1</a></li>
<li><a href=”#”>…

.dropdown a {border-top:1px solid #b9d6dc;…
.dropdown a.top {border: 0;}

I do alot of work with CMS and styling lists like this makes automated population easyer and saves a few more bytes =)
http://www.kindertent.nl/knorretjeforeverblue2 Marjolein

I had a dropdownmenu on my site but i was not satisfied, but now I do!! This is perfect! It’s very easy to use, thank you very much .
A satisfied girl from the netherlands
Joey

I’m also from the Netherlands.
I like the menu very mutch and it’s beautiful.

But I have one question about it:
Is it possible to make a sub-sub menu?
A Navigation item 1.1.1?
The first 1 is the Horizantal menu button
The second 1 is the first drop down menu item
The thirt 1 is the sub menu from the second 1.
http://www.leigeber.com Michael

@Joey – Have had this question a few times so I will be adding multi-level support in the next week. I will notify you and others when I have it live. If you cannot wait then it should not be too hard to extend the current script.
Sac

nice work done, but i need sub-sub menu. hope i’ll get soon…
http://kimguanzon.com joachim guanzon

can there be a multi column dropdown version of this script? I’ve been looking around for one for a year and no one has done a sleek dropdown like yours.

sample: johnlewis.com
http://www.leigeber.com Michael

@joachim guanzon – Shoot me an email I can help you out. You should be able to just modify the CSS and markup to get multiple columns.
Slash

Hey, just wanted to say I’m using this script for a website I’m designing and it works great. (Though it seems to run slow on Opera and Firefox, for some reason)
I had a semi-outside question, in that I can’t figure out how in the world to center this. Forcing the menu to the left side of the page would work, but centered looks better. =) I’ve tried surrounding it with “margin: 0 auto” divs but that hasn’t helped any. Any ideas?

Thanks.
http://www.leigeber.com Michael

@Slash – Different browsers handle the timeout speed a little differently. In particular IE will usually seem faster than others but it is not performance-related, just how they handle things. I helped someone with a couple issues including centering and you can see it at http://sandbox.leigeber.com/dropdown2/dropdown.html Shoot me an email if you can’t figure it out from viewing the source on that demo.
http://www.webtechnica.net/ m3talc0re

I like this menu a lot, but it’s just got a few things I can’t get working.
> Would it even be possible to get onclick and onblur working? (I know dt doesn’t support onblur).
> Is there an easy way to position the menu? Like, right or left? I’m asking because the dropdown will have multiple instances and they can be on the left and/or right side of the page. Left is fine like it is, but the ones on the right have to have their extra width go left of the ddheader, being pinned to the bottom right corner of the menu.
http://www.leigeber.com Michael

m3talc0re – The things you mentioned here should not take too much customization. The menu should support whatever mouse events you need and the positioning can be completely controlled through the markup/css, you are not locked in to floating everything to the left. I would be happy to help you, just shoot an email with a link.
Sac

Hi Michael! I need sub sbu menu, will u please tell me when u’ll post that.

-Thank’s
http://www.leigeber.com Michael

@Sac – Certainly, will do my best to get it out this week.
Slash

Michael,

Thanks for the help previously. I was trying to avoid having to have a fixed pixel width for the page I’m designing, but it looks like that’s the only way to get it to center appropriately.

One more question though, is there any w3c-valid way to make the top entry of the list (that is, the part you rollover to get the rest to drop down) into a link? Putting an anchor around the whole <dl> area works, but the validator gripes at me. =)

Just curious, thanks!
http://www.leigeber.com Michael

@Slash – I believe both of your issues can be resolved. Shoot me an email with a link to where you are now and I will get back to you when I can with my thoughts.
http://www.epochwebdesign.com Tyler

This is great, I will use it for one of my client sites.

Cheers!
http://www.computerweetjes.v3host.nl Joey

@slash,

If it has succeeded to make a link in the head part. May I then have your script so that I also can use a link in the head of the dropdown menu balk.

@michael,
Thanks, that you would make a sub-sub-menu. I’m still waighting at the release.

It’s possible that there are a few language errors are in my comment. Because I live in the Netherlands and my English isn’t very good.
Solnyshko

I need that selected index would be displayed on the screen and I can’t do this,could you help me,please
http://www.leigeber.com Michael

@Solnyshko – Not sure exactly what you are asking. Shoot me an email with clarification and I will do what I can to help.
http://www.chocolatebydeath.com Lars

Hey Michael. Thank you for making your code available, I think a lot of people appreciate it a lot.
Unfortunately I ran into the IE z-Index bug with your menu solution, might be an issue for others too. Send you an eMail.
All the best
Lars
http://www.snoupix.com/ Stephane

Hi Michael,
Is there an easy way to make the background of the dropdown menu transparent ?

Cheers !
http://www.leigeber.com Michael

Stephane – To make the background completely transparent you could just remove the background color on the list elements in the CSS.
Lars

Solved my problem by using different positioning for certain design elements.
Thank you

Lars
Lawrence

Hello folks,

Below is part of a drop-down menu i’ve created for my project. On I.E. Sub-menus onhover appear downwards. May i know what do i need to change on the Javascript/CSS/etc. to make sub-menus onhover to appear to the right side please? Thank you very much for your promt answers.

XHTML:

<ul id=”sddm”>

<li>
<a href=”smoking_index.html”

onmouseover=”mopen(‘m1′)”
onmouseout=”mclosetime()”>Living life as an addict</a>

<div id=”m1″

onmouseover=”mcancelclosetime()”
onmouseout=”mclosetime()”>

<a href=”smoker.html”>Who’s a smoker?</a>
<a href=”smokerlife.html”>How’s a smoker’s life like?</a>
<a href=”facts.html”>Facts</a>

</div>
</li>
</ul>

Javascript:

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function mopen(id)

{ mcancelclosetime();

if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;

ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = ‘visible’; }

function mclose()

{ if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’; }

function mclosetime()

{ closetimer = window.setTimeout(mclose, timeout); }

function mcancelclosetime()

{ if(closetimer)

{ window.clearTimeout(closetimer);
closetimer = null; }
}

document.onclick = mclose;

Regards,
Lawrence
http://www.leigeber.com Michael

@Lawrence – This may be what you are looking for http://www.leigeber.com/2008/05/vertical-flyout-javascript-menu/
http://www.juraj.nl Juki

Hi Michael! This is such a cool dropdown menu. Ive been playing and testing it with succes. But I cant figure out one thing. How can I <a href the main menu items? The way im doing it is wrong cause im getting the submenu css properties.

I hope you can help me with this, Thanks!

Juki -> Netherlands
http://www.leigeber.com Michael

@Juki – You would just need to nest a link in the dt. Of course you might want to make the link a block and alter the dt CSS so the link fills the entire area. Shoot me an email if you can’t get it worked out.
joey

@Michael,

What’s the status of the sub-sub menu?
I’m still waiting at the release.
http://www.leigeber.com Michael

@joey – Had hoped to release last night but have run into an ugly IE6 issue as usual. Will continue this evening if I have some time.
Bill

Awesome! Thanks for sharing this. One question: How can I change it so that the menu background fades to only, say, 75% opacity?

Thanks again!
http://www.projecto3.com Erik

Michael, Love the menu! I was thinking of doing something similar using script.aculo.us, but then I came across your menu. It looks good and it’s much more lightweight than the script.aculo.us version would be, I think. Anyway, I really need an additional level for the site I’m working on (you know, the sub-sub menu everyone is asking for). What is your eta on having a working version of that? Thanks so much!
http://www.leigeber.com Michael

@Erik – I would like to say this evening but I can’t say for sure. All I lack is a stubborn IE issue I have to work around. I will shoot you and others an email when it is active.
John Devriesch

Hello Michael, what a splendid menu! But I have a small problem.
When i use your menu, and say use 5 menus in a row beside each other, and i want one button to have no dropdown-menu but only a link, how do i inplement this in the html? or should i use, for this single button, a mouse-over script. Thanks, John
http://www.leigeber.com Michael

@John – It really depends on your situation. You could just use the same style in the CSS for the dt tag on a class for your static links and then simple add in a link where you need it. There are a few ways to tackle it. Shoot me an email if you need help.
Andy

Hi Michael, The drop down looks great. Thanks for sharing. I just wondered if you have created or seen anyone use unordered lists layout for the drop down trigger instead of definition lists? I’m hoping to incorporate this into a site using the modX CMS.
http://www.leigeber.com Michael

@Andy – Originally the menu was using block links and unordered lists so it is definitely possible with little modification. Shoot me an email and I can help you work through it.

http://www.computerweetjes.v3host.nl Joey

@Michael,

What do I wrong to make a link in the head section:
My dropdown.html file:

<dl class="dropdown">
  <dt id="1-ddheader" onmouseover="ddMenu('1',1)" onmouseout="ddMenu('1',-1)">
  	<a href="/index.htm"><font color="#232323">Algemeen</font></a></dt>
  <dd id="1-ddcontent" onmouseover="cancelHide('1')" onmouseout="ddMenu('1',-1)">
    <ul>
      <li><a href="/index.htm"><font color="#232323">Home</font></a></li>
      <li><a href="/contact.htm"><font color="#232323">Contact</font></a></li>
	  <li><a href="/forum/"><font color="#232323">Forum</font></a></li>
    </ul>
  </dd>
</dl>

<dl class="dropdown">
  <dt id="2-ddheader" onmouseover="ddMenu('2',1)" onmouseout="ddMenu('2',-1)">
	<font color="#232323">Gratis software</font></dt>
  <dd id="2-ddcontent" onmouseover="cancelHide('2')" onmouseout="ddMenu('2',-1)">
    <ul>
      <li><a href="/Gratis%20software/index.htm"><font color="#232323">Gratis
		software</font></a></li>
    </ul>
  </dd>
</dl>

<dl class="dropdown">
  <dt id="3-ddheader" onmouseover="ddMenu('3',1)" onmouseout="ddMenu('3',-1)">
	<font color="#232323">Tools</font></dt>
  <dd id="3-ddcontent" onmouseover="cancelHide('3')" onmouseout="ddMenu('3',-1)">
    <ul>
      <li><a href="/Tools/Radio/index.htm"><font color="#232323">Online
		radio</font></a></li>
    </ul>
  </dd>
</dl>

<div style="clear:both" />

And my Stylesheet .css file:

body {margin:25px; font:12px Verdana, Arial, Helvetica;}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/menu/header.gif)}
.dropdown dt:hover {background:url(images/menu/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}

Joey; The Netherlands

http://www.leigeber.com Michael

@Joey – It will be a lot easier for me to look at if you can send me a link to your page.
http://www.computerweetjes.v3host.nl Joey

@Michael

I have send a mail to you. With my websiteadress and information.

Joey: The Netherlands
Blix

Thank you for this wonderfull dropdown menu. It really is the best of its kind !
Lawrence

Thank you so much Michael for leaving me your reply. And i’m terribly sorry for this late reply. You are just that one-of-the-kind nicest person around.
http://www.agapeboardingschool.org/NEW/ JB

First things first, this nav is outstanding, and it makes idiots like me look like a wizard. for that, i think you greatly. On to the point…

This may be somewhat contrary to the concept of a CSS nav, but i have… unique clients that require the use of an image as the main nav link, with the animated flyout. I was wondering if there’s a decent way to do this instead of using a css text based top nav link?
COdie

Hey, I love this script:) Its great.

Could you please tell me how i would go about making sub menus for this, like, having a dropdown menu within a drop down menu. Thanks.
http://www.leigeber.com Michael

@JB – Sure, you could just remove the padding from the dt and add in an image or use CSS background images through the use of different classes for each. Shoot me an email if you get hung up on anything.

@Codie – I have been working on this and will hopefulyl get some time to look at it again. http://sandbox.leigeber.com/multilevel/

There are a few tricky issues, particularly with IE.
COdie

@Michael, that is exactly what Im looking for, could you post the source code for that, sorry im still noob, only started about a month ago. Thanks.
http://www.projecto3.com Erik

@Michael, Looked at your sandbox version of the multilevel nav. I took a quick look in IE6 and didn’t notice any immediate issues. Maybe I didn’t look hard enough. Can you explain the issues you are seeing and trying to resolve?

Again, thanks for all your work on this menu and your willingness to share. You have really done an amazing job!
http://www.projecto3.com Erik

@Michael, Actually I just modified your code to fit my needs and I see more of a problem with my multilevel version in IE6 than I see with yours. I’m not sure where I went wrong… Have a look if you’d like.

http://projecto3.com/clients/covenant_dropdown/index.html
http://www.leigeber.com Michael

@Codiue and Erik – I will try and wrap it up today. I fixed another bug yesterday and have 2 left. I will add a new post then.

@Erik – As for your issue, looks like an IE only thing. I really need to spend my time wrapping this up and then after I release the final code if you are still having problems I will take a look.
mothra9999

excellent code!
question: is there a way to have the dt element (‘Dropdown One’ in the demo) stay ‘active’ with the hot color (darker color in the demo) when you mouse over the dropdown items instead of switching back?
http://www.leigeber.com Michael

@mothra9999 – It would have to be done with the JavaScript, it should only be two lines of code. One in the ddMenu that appends another class to the header and then one in the ddCollapse function that removes that classname. Shoot me an email if you can’t get it figured out.
Eric

Thanks for the great example! Is there any way to make it so the drop down opens and closes on click instead of on mouseover?
I got it to open on click by changing the mouseover to this: onclick=”ddMenu(‘one’,1)” which works. Though is there a way to get it to close by clicking on the main menu tab again?
Thanks!
http://www.leigeber.com Michael

@Eric – It can definitely be done. I am a little tied up the next day or so but shoot me an email if you can’t get it worked out and I will do what I can to help.
Chris

Michael – Great script. Very clean and straightforward. Excellent job as far as I can tell.

I’ve been playing with the multilevel and noticed if you hold your mouse over a sublink (IE7) and just let it hover there for 15 seconds or so, the page length starts to buildup and te scroll bar on the page keeps increasing.

Not sure if you were aware of that. Great job though!
http://www.leigeber.com Michael

@Chris – Thanks, yea I am aware, it is one of the couple remaining issues with the script. I just haven’t had any time lately to wrap it up.
haymaker

Michael – thank you very much for this script! This is the coolest dropdown menu I’ve found. Really, really great.
However, I am having a problem with the menus flashing and displaying behind a .swf – in IE and firefox. I’ve added wmode=”transparent” to my object and embed tags for the swf, but still no joy. Have you seen this before? Any suggestions?
http://www.leigeber.com Michael

@haymaker – Email me a link and I will look into it. If you have the flash embedded correctly it should not be an issue.
Louis

Awesome, this solves my problem with my non-flash commitment. Thanks a lot!
Jorge

Great job. Waiting to see the multilevel one.
http://2008.igem.org/Team:KULeuven/Zandbak Antoine

Great job. I do have a problem however, I’m using this drop-down bar for a wiki, and it tends to render wrong (submenus are shifted towards the right). Any suggestion? I myself am not such a CSS/JS expert…
http://www.leigeber.com Michael

@Antoine – Have you checked to be sure that your CSS is in place and that none of your existing CSS shares the same class/id names as the dropdown styles? Shoot me an email if you don’t see a conflict and I will dig into it.
Ben

Michael, any luck with the problem that haymaker was having? I’m having a nightmare with Firefox 2 on Mac when the menu appears directly above a Flash object. I’ve tried everything I can in terms of z-index, wmode=transparent (and opaque), etc. etc., and am having no joy.

I think my last option must be to just detect for FF2 and show an image instead of Flash?

Any help would be much appreciated.
Ben

Oops and I forgot to say what my problem even was! Basically, it’s to do with FF2′s hatred/refusal of the CSS ‘opacity’ property when combined with Flash (on Mac at least). As soon as the menu slides down (and thus the bits with opacity on them touch the Flash object), the Flash disappears completely. I’ve found some info about this here:

http://jakeo.org/blog/2007/03/16/css-opacity-and-flash-transparency-in-mac-firefox/

But have been unable to apply his fix to this menu.
veeru

Hi Michael, its really good work. Do u have any idea how to use menu source as xml like ajax switch menu http://www.getelementbyid.com/scripts/doc/AjaxSwitchMenu.html

Thanks alot
http://www.leigeber.com Michael

@Ben – I was not aware that FF had an issue like that. Unfortunately I do not have a mac to test on so getting that resolved will be difficult. If I can get hold of a mac I will check it out else let me know if you ever get it resolved. Thanks.

@veeru – Sure, it wouldn’t be hard to parse XML for the menu structure. I will add JavaScript XML parsing to my post todo list.
http://fluencyinc.com fritzd

Agreeing with everyone.. GREAT script. Two quick questions… 1. Can this work together with your other script “Sliding JS Menu Highlight” http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/

and 2. Can this work without using a DL and just use a div and ul, li combination (as that’s the way I have the Sliding JS Menu script working)… Let me know. – Thanks again!
Ben

Thanks for replying Mike. My solution was to just place the Flash object in a div with a background image that looks identical to the Flash (just without animation), so that when the Flash does disappear, the FF2 Mac users will hardly notice.

The CSS-transparency-freaking-out-with-Flash issue has been fixed in Firefox 3 so there’s no need to worry about it really!
veeru

Dear Michael

Plz let me know that when ur trying to give support for xml datasource. Thanks alot
Veeru
http://www.leigeber.com Michael

@fridtz – Sure you could combine the two scripts, should not be a problem. It would also be a pretty easy change to use simple unordered lists Shoot me an email if you need help.

@Ben – Glad it got resolved.
mahyar

Nice menu.

i have been trying to center the menu but, whatever i do, it still pushes the dropdown to the right.
is there a way to fix that?
Bharat

Very nice menu.

I have been waiting for the multilevel menu. Can you tell me when would that be live.

Thanks
http://www.gercekkarakus.com Gercek Karakus

Hi,

I tried to use your Sliding JavaScript Menu Highlight script with this one. However, I couldn’t get both of them work at the same time.

Any ideas?

http://www.taksimapartments.com/en/

Dropdown menu is under apartments.

Thanks,
http://www.gercekkarakus.com Gercek Karakus

You can contact me from gercekkATgmailDOTcom
Pingback: jsedlak » Blog Archive » Theming SharePoint (5 of Infinite)
ignacio

Hi ! this script is awesome ! i try to embedd it into a WordPress blog, but i don’t know exactly how to do it… i uploaded the .js and the css to the theme’s folder, and then past in the header.php the html code … but i’m afraid i need to write something in php language … ? well, any tip will be welcome !
http://www.leigeber.com Michael

@ignacio – It depends on what links you will including in the dropdown. Shoot me an email with the details/link and I will point you in the right direction.
Lauren

Hi! Excellent script, but have a question if you have the time to answer. I used the src code and scripts for the sub-sub menu, got it working on it’s own. As soon as I use it as an include file in .asp it stops working. Any suggestions? I had used your sub menu dropdown and it was great, then the client needed sub-sub menu dropdown, so had to change and now can’t get it working when it is included.
http://www.leigeber.com Michael

@Lauren – That doesn’t make much sense unless there is a JavaScript conflict of some sort. There is nothing specific to ASP that should cause a problem. Shoot me an email with a link if the site is external and I will dig into it.
Thallah

Thanks a lot for this nice looking piece of work, Michael… I played around with this script today and noticed that after the menu slides down and up again, there’s a small 4 px wide area underneath it… you can check this easily if you set a black background or turn opacity to 1 and take away c.style.opacity = currh / c.maxh; and // c.style.filter = ‘alpha(opacity=’ + (currh * 100 / c.maxh) + ‘)’;… i checked c.style.height = currh + (dist * d) + ‘px’ for this and actually this variable never drops below 4px… i’ll keep on working it, but maybe you have an idea why that is and can help me out… hope to hear from you <- using FF3/SeaMonkey
Thallah

ok, i am a little step further with my problem (above post): it seems like there is some issue with DDSPEED. when i set DDSPEED to < 2 everything works fine but any value above 2 will lead to some (not wanted) space below the menu bar, the size of this area changes with the value of DDSPEED (a value of DDSPEED = 100 will leave an area the size of Navigation Item 1 and 2 for example)… a value of DDSPEED = 2 and DDTIMER = 35 will lead to an acceptable result. i still would be interested in your opinion if there is any (other) way to fix this, otherwise a comment in the .js file might be helpful.
Thallah

allright, i changed a single line of your code and now it works fine for me: instead of if(dist <= 1 && d == 1) in your ddSlide(c,d) function i just used if(dist < 1) so that dist will be set to one on expand and contract, not only expand. if you know that this will lead to some unexpected result, please let me know again, thanks for your code, it really was fun ‘reading’ it, guess i learned quite a lot today
Trung

Link Menu root? Ex: Link: menu: Home, Conntact.
sijo

In IE(6) when the dropdown menu is collapsed the menu is not completely hidden but a tip of the top area of menu is still viewable.Anybody noticed this?Any solution?
http://www.pantekllc.com JoeS

I have 4 of these menus on my page. For some reason, only one is working. Any ideas?
Thallah

@sijo
i discovered the same problem… just replace if(dist <= 1 && d == 1) with if(dist < 1) in the js ddSlide(c,d) function
http://www.leigeber.com Michael

@Thallah – Sorry I didn’t get back to you sooner, glad you got it worked out. Thanks for the little fix you posted too, I will take a look.

@Trung – I am a little confused by your message. Shoot me an email with a better explanation of what you are looking for.
Bharat

Dear Michael,

I am still kinda waiting for the multilevel menu. Is there a way you can tell me how to make it.

Thanks,
Bharat
http://www.nosediveproductions.com/ Pete

Wow, this is a really great script… Very easy to use! I’m relatively inexperienced with javascript, but updating this seemed to be a snap once I figured out all the css properties.

Having one small problem with it. A number of the pages I’m working on have embedded Youtube or Google videos on them. On some browsers the dropdown menus appear behind the first video instead of in front of it, essentially cutting off the bottom of the menu. What can I do to avoid this problem?

Here’s a link to the workpage of the site I’m using the script on: http://www.nosediveproductions.com/NosediveRev2008/VideoProductions.html If you could give any feedback on the video issue, or any other concerns you see, it would be much appreciated.
JP

Thank you for the great code. Nice job!

I have a question. When less than three navigation items used in the dropdown and after having it rolled over, it leaves a light shadow at the bottom of the menu box. Is there way to get rid of this shadow?

Thanks in advance,

JP
Rahul Bairathi

Hello, Actuallly i m a beginner in this…so please tell me how to use your codes in the edit html of the blogger
Rahul Bairathi

my email address is
bairathirahul@gmail.com
palaniappan

HI michael you are really great. i thought you would not reply to my mail regarding accordion. but you sent the mail with solution. hat’s off
Nekita

This is such a lovely menu.
Not trying to sound impatient, but is there any progress on the multi-level support yet?

Thank so much!
http://www.leigeber.com Michael

@Pete – You need to use the wmode attribute, set it to transparent.

@JP – I believe Thallah may have posted a fix above. I have not looked it it yet so I cannot say for certain. I will try and get a fix posted soon wither way.

@Rahul Bairathi – I don’t know anything about the Blogger editor, sorry.
http://www.excel-extools.com Vincent

Hi,

The menu bar can’t change image on hover (header_over.gif) in IE6. But it seems that the multilevel version is ok in IE6. Is there any fix for this for the non-multilevel version?

Thanks.
Dane

Hi,

Great great menu! Thanks so much! I’m planning on using it in a site i’m developing. However, i do have a problem..when i go to the multi-level drop down page and download the webpage completely, if i run it locally using firefox, it seems that the codes don’t work anymore. The top level menu doesn’t even drop. Can anyone help me on this? Appreciate it a lot!
Thanks!
dave

i have the drop down menu working well, i would also like the slide up, on the same page.

how do i implement the slide up effect?

thanks
dave

i have the slide up working successfully, but i can only get one of them to work on the same page – not both – any suggestions? thanks
http://playersbench.com Greg

Micheal,
Did you get the submenu code posted/finished. This is great but I need to have horz. subs under a few of the dropdowns. Thanks Greg
Pete

Wonderful, think I have it figured out. Thanks for the help!
Brian

There is a slight problem in IE 7 I think, the drop downs are a considerable length with after the last option, there is a large whack of empty space stretching down the page, could be a fault on my side but not sure
joy

hey, i have a question, what if you are using table instead of <dl>? how can you modify it? it seems like its not working if you’ll embed this to a table tag
KJ

This is probably a dumb question, but the dropdown only seems to work when the mouse is above and below the text. When it is on the text the cursor turns to the text tool and the dropdown disappears.
KJ

Nevermind – I had a conflicting div and just had to change the z-index. Sorry! Thanks for the great tutorial!
Pingback: Bookmarks about Dropdown
http://www.leigeber.com Michael

@Vincent – IE6 does not support the pseudo hover effect on divs. You could replicate the hover functionality with JavaScript if the lack of IE6 support is an issue.

@Dane – Doesn’t make sense why it would not work. Is it only not working in Firefox?

@dave – You would need to merge the scripts, if you simply combine the two some of the functions would conflict.

@Greg – Still not published, just keeping up with emails and comments takes most of the time I used to have to post. Hopefully soon. You might look into combining the dropdown and accordion scripts.

@Brian – Not seeing the issue. Shoot me an email with more info so I can try and replicate. Thanks for reporting.

@joy – I definitely would not recommend using a table. Is there a reason you have to use one? Email me.
STANKY

ive been through a million java menus all taking up way too much time. this is by far the best your a life saver
dave

thanks for the reply.

i am also having a slight problem with displaying the menu in Safari. i have set up the menu to roll over an embedded flash movie, which is fine for most browsers, but in Safari, when the menu is rolled over, the movie dissappears.

Any clues on this?

Thanks a lot.
awe

Hey! a great script! I have been looking for this a a loong time
Could you help me out with the way to make it “onclick” instead of “onmouseover”? Also, is it possible to have the content visible first and then by clicking the header would hide the content? Your current script is just opposite
Thanks a lot!
Steve G

After spending days looking at many, many drop downs, I stumbled onto this one. It is fantastically straight forward to use. I am trying it on a frames page where the drop down parent appears in the banner frame at the top if the page. A problem I face is that the drop down navigation links are “hidden” behind the frame that is below the banner frame. To see the drop down navigation links, I must increase the number of rows designated for the top banner frame which compromises the total page display. Using the target tag, I have no problem making the selected navigated link appear in the bottom frame. Is there any way to cause the drop down navigation link to display at the front of all open frames? With such a display, the display rows of the banner frame could remain the original amount. Thanks again for a great tool!
http://www.henryhoffman.com Henry Hoffman

Hi, this looks really great. I want to try and integrate this into some content managed sites which generate unordered lists. Is there any news on it being integrated into a standard unordered list?
http://www.terabandtech.com Seuldieu

Hi Michael,

I’m having the same issue as Vincent — I need the hover effect to work in IE6 desperately; I’m not familiar with the code to enact the necessary javascript, and was hoping you could send me an email with the changes?

I’d appreciate any help at all though, as this is one of the last few things I need to attend to in finishing this project.
http://www.leigeber.com Michael

@dave – Email me a link if you like and I will take a look when I can.

@Steve G – Not sure of a resolution off the top of my head. Email me a link and I can investigate.

@Henry – There would be no JS involved to change the dropdown to a list so if you are familiar with html/css give it a shot.

@Seuldieu – Basically you would need to do something like div.className += ‘ hoverclass’ on hover and then remove the class onmouseout. Hopefully that makes sense?
http://emccreative.com brooke

I am loving this script. It is doing exactly what I want it to do. I would like the main horizontal nav to be also a UL. Does someone have the code of how they integrated this? I can’t seem to get it to behave like I want it to.
Pingback: Zintak» Blog Archive » Sliding JavaScript Menu
http://www.flisterz.com flisterz

What should I change to get the slide-up effect? I viewed the .js file for the slide-up demo page, and replace it with the slide-down one, now it is not working at all. can you explain?
http://www.flisterz.com flisterz

oh nevermind, it works now. changed the CSS thanks!
http://www.kartelsolutions.com Simon

Hi
we have been looking at JS menus in depth – used a couple but for one requirement we need to have some 3,000 entries in the dropdown list – clients wish not our recommendation
can you let me know if your function will handle this or any suggestions what we should do instead

thanks
Simon
http://www.digitalvisiondesign.com Dsmflash

Awesome script and easy to use. However, how do you give the top item an href. I don’t need a drop down on every link, but don’t know how to make the top level a link. i get some funky stuff when I do something like this:

<dl class=”dropdown”>
<dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)” ><a href=”#” title=”Home”></a></dt>
</dl>

I’m using image only rollovers sometimes. No text link.

Thanks again Mike
http://www.digitalvisiondesign.com Dsmflash

Ok. Think I got it. Hope this helps someone. if you just want an image bkg rollover with no dropdown on the top level, you html should look like this:

<dl class=”dropdown”>
<dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)” ><a href=”http://yahoo.com” title=”Home”></a></dt>
</dl>

CSS:

#nav dl dt a {width:auto; height:18px; background-color:transparent; margin:0px; padding:0px}

Maybe not the best way, but worked for me. If anyone has a better way, i’m open to suggestions. Just trying to give back a little.
http://www.digitalvisiondesign.com Dsmflash

Have another question, in FF and IE 7, the button blinks the first time you rollover it, and then operates normal on second rollover.
Is there a fix for the “blink”.

Thanks,
LAmaster

in FF2(FF3 IE6/7 etc. normal) it works slower, whats the problem?
Biren

Michael,

Is there any way to close the dropdown once you hit any of the items in the dropdown? Like how can i collapse the menu after someone clicks on an item. Right now i have to physically mouseout of the dropdown in order for it to disappear. Please help. Thanks.
http://schoolwaxtv.com Leetamus

Hello and thank you for providing this awesome script! I’ve ran in to two small issues. Tested locally and all ran fine – tested online and for some reason the page loads before the the js file is read (i assume) and as a result, the menu displays vertically and all the sub menus are visible. So the site content is loading half way down the page. Here’s a link:
http://schoolwaxtv.com

The other thing is way less critical. I notice in IE6 once i mouse over a button, the mouse begins to flash and continues to do so until I load a different page.

Thanks again!
http://www.bricktrick.de Mario

Amazing 1-Level-dropdown!
I´m searching for a new drop-down for my page, but I must have a 2-level-drop-down. Means, there must be a field which slides out to the right for more detailed links.
Ouhm, hard to translate for me, but I hope you understand what I mean, and I hope you can help me out.
Best wishes,
Mario
Blackwell

Awesome, scripts, Michael! I’m using this dropdown script and your accordion script on one of my sites.

@Bill on 09 Jun 2008, regarding keeping the opacity of the dropdowns at a certain percentage:
I was able to do this by changing line 53 to:
c.style.opacity = currh / (c.maxh * 1.2);

(try varying that number to adjust.) However, it doesn’t seem to work in IE (I’m using v7). It worked great in FF and Safari on Mac and PC, and in Chrome on the PC.
Mark

Great script! I had one question, I’ve tried using transparent PNGs (partial backround transparency) with this script and it actually cancels the transparent nature of the PNGs for some reason. Is there any modification anyone can think of in order to allow transparent PNG to be used with this script?

Thanks!!
Vishal

Just merged in the css code from the Vertical version of this, to make the top lables linkable (@trung, i think).
Here: http://mihd.net/3t9cimx. Hardly a breakthrough, I know, but I’m new at this whole CSS thing, and holy crap, I did something.

Now, can someone post a working submenu version? Nice little bundle would be nice. )
Pingback: Dynamic DropDown PHP/AJAX - EXPERTS ADVICE FORUM
http://www.ftsolution.net Tsubasa

Its really a great script! Thanks a lot! I like all your scripts veey much

Just a little comment that I found that once the sliding menu collapse, it will not return back to 0px height. Therefore it’s very obvious when I integrate it with your dialog box javascript (sliding menu still can be accessed though dialog box appear since there is still a gap remain after it collapse)

and I have noticed for this line of code

if((currh < 2 && d != 1) || (currh > (c.maxh – 2) && d == 1)){

(currh < 2 && d != 1) will never reach, since currh will always greater than 2

So I have changed it to

if((currh < 5 && d != 1) || (currh > (c.maxh – 2) && d == 1)){
if(d != 1)
c.style.height = ’0px’;

and it works.

It’s just my little comment, I’m looking forward for your new fantastic scripts. Keep up the good work
Aryan

I am also having flashing problem while overlapping flash animation in Firefox 3. I have removed opacity from navigation, still having problem.

What to do now?
http://getstyle.com.ar Roy

I have a problem on IE6, the select tag ALWAYS appear upside the dropdown menu. Is there a way to solve it?
Ah Woon Chan

Hi there! I’m having the same problem as Brian…

“There is a slight problem in IE 7 I think, the drop downs are a considerable length with after the last option, there is a large whack of empty space stretching down the page, could be a fault on my side but not sure”

Did you find a solution for it? Also I’m having a problem with IE 6 it seems that the names of the navigation item goes to different lines if there is a space.
For example when hover 2008 the contents will be like this:
friday
meeting
bowling event
Though it should be:
friday meeting
bowling event

Thanks!
Ah Woon Chan

oh and forgot to ask about the submenu possibility… is it ready?
Bryce

These are the best CSS/JS dropdowns out there! Great work!
http://www.natpoint.co.uk Carlos

Excellet… Works perfect in all the browsers.. Great script, thanks a lot
mike

thx for the codes.
1 question

how to resize each drop menu size so all the boxes arent the same size? cuz the texts are not in the same length and i need to shrink down the box for shorter text.
Jonathan Daggar

I’ve been looking around for a dropdown menu script for a client, and I am happily spoiled for choice– there are many around, and quite a few good ones. Even among those, this one stands out. It’s the best I’ve seen.

Thanks.
Giles

Hi, thanks for this great script. One issue I have found is that for some reason the drop-down menus are displaced approx 40px to the right.
I’ve used the css pretty much as is, except for changing colour values and sizes so as to fit more menus on the page.
I have worked around the issue by absolutely positioning all the dd elements, but I suspect there is something more simple I am missing.
Any ideas?
Thanks
Leka

Hi Michael, Thank you very much for this script! It is an awesome script. I was wondering what I would need to do to get the dt item to stay same color as the submenu while I’m viewing it’s submenu. I plan to have the dt item 70px and the menu 150px. My files are exactly the same so there was no need to post scenario since I have not made any modifications to your code yet. Can you please help me with this one.
Thank you.

Leka
Jason

I am not sure if someone has stated this already … but in FF3 for Mac, I am getting a rendering error. For the top level menu elements, there is a 1 pixel offset at the bottom of the menu item. Other than that, it is a great looking nav.
http://www.alfaridzy.wordpress.com alfaridzy

im from Indonesia, thanks bro, may I link this
http://utchanovsky.com utchanovsky

Can I put this javascript into joomla CMS?
Pingback: Sliding JavaScript Dropdown Menu « notizblogg
Linda

hello – is there a way to make the top navigation element a hot link?
http://mogya.com mogya

I found one workaround for Ben’s issue(Flash disappear under the menu with Firefox 2 on Mac).

Commented out “opacity” from CSS(1 line) and javascript(1line).
Then, Flash doesn’t disappear with FireFox2 on Mac.

Michael, How does this negatively affect your script?
Dave

I put this script on my page, but it FF it makes my site left justified instead of centered. how do I fix this?

Thanks,
Kurt

I downloaded this and got the files dropdown.js, dropdown.html, dropdown.css, and images. I copied the above script into my notepad html document. Where do I have to put those files in order to get this to work. It says that in order to unpack the file I need a password. What am I doing wrong. (really want to get this to work)
Joey

Is the multi-level drop down menu available.
If it, where can I get it, or how do I create it.

Thanks,
http://www.imagesdesign.com IDC

Fabulous!…
Has anyone tried to set this up so the position is centered.
I just can’t seem to get it. I must be missing something.
agassiz

Hi there I really like this drop down menu but I have one problem. I would like to make one of the menus with no drop downs and just make it a link
I have tried changing the code like so, but it just screws up the appearance.
Any help would be appreciated.

<dl class=”dropdown”>
<dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)”><a href=”www.example.com”>Home</a></dt>
<dd id=”one-ddcontent” onmouseover=”cancelHide(‘one’)” onmouseout=”ddMenu(‘one’,-1)”>
sassygirl

agassiz, I am having the exact same problem. I hope you get an answer soon as I am anxiously attempting to fix this as well.
sassygirl

OK! I got my menu fixed and working perfectly. However, now my menu isn’t centered on the page. I am not CSS and HTML literate, so speak slowly:) I researched and the only solution I found was to remove display block from my styles, but that’s how I finally got the top items to appear properly with a link. Help?
Toth

This is great, thank you. Is there any sort of license attached to this?
Sean

Hey there Michael.

I need to have this dropdown menu with a different background image in each main link. How could I do this?

Thanks,

Sean
Nobunaga

Love this script and all of the goodies accompanying it.
Works pretty good, no conflicts in most modern browsers, but I was having issues with IE6 letting my 100+ entry list scroll off of the page. When you mouseout the menu collapses, so if you have a wheel mouse no problems but with no wheel mouse you couldn’t get to the bottom of the list. I fixed that by adding to my ul css rules a height of 400px and overflow: scroll. That allows for the list to stay on the page and scroll bar to appear. Previously the scroll bar would expand the length of the list and then disappear.
I am not very good with javascripts, yet, so I couldn’t figure out how to add a list of ids to the script. Because I have 3 lists (dropdowns) to implement, on one page, I decided to copy the script three times, rename them, and change the ids listed within. Is that a proper solution or there a method to add the ids to the original script and still avoid scripting conflicts?

Thanks
Nobunaga

Okay, I was wrong, it’s not working. I tried changing the ids when copying the script, then added link refs to my header region to each script. Now the menus don’t expand at all. I am doing something wrong. Probably an easy fix but you know the story, I’m a noob.
Nobunaga

Figured out what I was doing worng, via trial and error. In order for these menus to be displayed on the same page I did not have to recreate the script. I had to change the name of the id assigned to the dt and dd elements. for instance what read “<dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)”>Georgia</dt>
<dd id=”one-ddcontent” onmouseover=”cancelHide(‘one’)” onmouseout=”ddMenu(‘one’,-1)”>” on the first menu I changed to “<dt id=”two-ddheader” onmouseover=”ddMenu(‘two’,1)” onmouseout=”ddMenu(‘two’,-1)”>Georgia</dt>
<dd id=”two-ddcontent” onmouseover=”cancelHide(‘two’)” onmouseout=”ddMenu(‘two’,-1)”>” and it works great!!!!
I guess logic wins out on this one, but I am sure if I knew javascripting that would have been elementary (no pun intended).
http://www.kimguanzon.com Joachim Guanzon

Michael, I can’t thank you enough for your help with this code. I have implemented the multi-column dropdown version in our website:

http://www.xango.com

thanks again!
Sara

anyone else having problems in IE6?

Even at the site: http://sandbox.leigeber.com/multilevel/
the first submenu didn’t show up..see the picture below

http://img148.imageshack.us/img148/1570/sandboxleigebercomslashpw9.jpg
Tensh

If you’re searching for ideas as for scripting, I’d really like to have a small and easy ajax tab script. The tabs would be able to load already existing content, or load external web pages…

Would you like to write a script like this? Pretty please!
Pingback: Javascript dropdown "sliding" menu wanted - any recommendations?
http://www.leigeber.com Michael

I will be releasing an updated dropdown script this weekend 11/23/08 that fixes any open issues, includes an example for a link-only heading and supports multiple levels. Comments will now be closed for this post.