If Elvis was alive he’d call you the king.
This is awesome.
Much thanks

since the prototype method became robust there a lot of tools outcoming such as this one, and you made it a good job. I’ve love this very much, by the way, can i change teh background as well? in order to fit my needs? anyway i’lljust look over the files. thanks a lot

Great script as always, a problem that I’ve had with these types of dropdown menu’s in the past is if the multiple level links are near the edge of the screen, once opened they appear outside screen.

A possible solution might be to check the browser width, get the location of the mouse, perform a check and if its going to open outside the screen make the links appear to the left instead of the right. Anyway thanks for the script.

Is it possible to add a delay when the cursor leaves the dropdown? One of my main gripes with using CSS only nav menus is that once the cursor goes off the edge of the link – it closes the menu system too quickly. Sometimes this makes the menu hard to use. With JS menus, some of them add a delay to fix this issue.

wow….. thanks for the useful script.

Very nice. The fading is used very well.

Thanks!

good job! both visual effects and code concision

One Additional note: I tried your demo in IE and it works fine. I suspect that the problem is related to my putting the menu inside a <TD> tag. I’m going to rip it out and try that. Just thought I’d post this so no body would think there’s a problem in your code. Although this might be considered a limitation. )

Great Job! Could you make it work with Right-to-Left sites too?

I couldn’t make the drop downs work with the keyboard. Would it pass 508? and is it accessible to keyboard only users?

I will look forward to seeing this work with the keyboard. Other than that it looks good.

Hi, Im having problems using the code, it keeps giving me the message “menu.st is not a function” in firebug on firefox. Does anybody have any ideas as to why this is happening?

Thanks

[...] Menu dropdown multinível em javascriptCustmomizando e implementando suas páginas de erro [...]

Amazing !!, so flexible, so simple ..css guru’s dream.
You’ve done a great contribution. Thank you.

Brilliant menu thank you for sharing it with us.

Michael – Thanks for the script. I sent you an email with a few problems I was having with the original drop down menu (without multi-levels) and I’ve since resolved most of the problems. One is particularly irritating though: only in FF3, the vertical spacing of the list items is way too much. It basically has stretched out the menu with more space between choices. Since it only happens in FF3 I’m assuming it’s not a CSS error (I have other CSS sheets affecting my pages), do you have any ideas why it’s doing this/how to fix it?

I love how the menu works in IE7 but for some reason I am having major problems with firefox 3. When I scroll over the drop down bar it display at the top of the screen and also the home button always lights up too no matter what button my mouse goes over. I know I have a few errors but so far have not been able to figure out the problem. Any ideas?

When i put the dropdown menu into my site there is a gap on top of the dropdown menu and i cannot find anything that is causing that. there is a banner in one of its own cells then the dropdown is in its own cell below it.

Please contact ASAP

I have Firefox 2.0.0.18. it work excellent but in IE 7 I have shit.

When site is load it is ok but when mouse is over menu, menu start blinking end open-close as such.

nice-artical

[...] and free java script drop down menu with multi levels from leigeber.com. I really like this script because it has a beautiful effect and light weight. If you’re [...]

Nice script, easy to use… Still aesthetically pleasing – hard to do sometimes –

Everyone complaining about the “blinking” just doesn’t have their HTML setup right and is missing the proper <!DOCTYPE> stuff that is shown in the example HTML. Please make sure you follow his example code closely.

On another note, I have been using this script for a while and I’ve noted that once in a while on a fresh page load, the 2nd level menus wont open up till I move off the menu, and come back to it and try a second time. This seems to be in IE mostly but i think firefox is having issues too. Any ideas?

It appears that these drop down scripts will not drop down over the top of flash. I am running a simple viewer gallery & the script willnot drop over the top of it… any suggestions? thanks

Hi,

I’ve implemented your dropdown menu, and it looks beautifull. I only have a problem with IE7. When I integrate it in my forum, the dropdown appears under the forum. Look here > http://comparenetbooks.org/forum/ . Any idea how to fix this ?

Thanks in advance.

[...] Очень красивая ява менюшка с полупрозрачностью и приятными переходами. Также есть вертикальный вариант, и многоуровневый вариант. [...]

Super menu! Was searching for something like this a long time.
Thanks man

Hi Michael

Thanks for this great menu!

I’m no programmer and this script did exactly as I wanted, it works a dream.. allows longer sub menu’s than the top.. most truncate the words!

More important it works seamlessly in both IE and Firefox!

Do you have a way of donating for this.. via PayPal or something.. it’s worth the money as it helped me no end )

Hi, I’m noticing the exact same problem that METAPHIZIKS had. This is even in your demo too. The peculiarity it this:

It works great in IE, it works great in FF on windows, but when run in FF on LINUX this problem is happening, where if you try to rollover to a submenu, it just resets the whole menu!

I’ve tried this on two peoples PCs running linux, with FF 3.0.5.
Running it in FF 3.0.5 in windows doesn’t have this problem!

Any ideas? It would be appreciated as I have this running on a live site now

It is beautiful though aside from that quark, thanks a million.

nice work ,easy to use

Great script, but the drop-down speed seems a little slow for my liking. Is there a variable I can adjust to increase the animation speed? (Or even better, make the menus appear instantly?)

when i change this part of de .js:
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=”; c.style.opacity=45; c.style.overflow=’visible’}
clearInterval(c.t); return
}

… and add

c.style.filter=’alpha(opacity=45)’ to get the opacity all the time, it dones’t show me then the submenues, need hwlp, i want that the whole menu appear almost transparent, how do i do that????

This menu is awesome. Thanks so much. Just wondering if its possible to get the menu to stay open when you click on it? I still want it to disappear if you roll off it unless you click on it? Any help would be great!

Hey, love your script.

I have a question for you. How do I set up and initialize 2 separate menus? For example, one on the bottom and one at the top of the page?

[...] 3. JavaScript Dropdown Menu with Multi Levels [...]

This is great, but what is the dd.prototype.st ?

I am trying to get it working with a page that also has jquery. I am thinking of just rewriting it as it is very simple. Nice work!

AWESOME script!!

Is there a way to control the up/down speed independently – the down dropping slower than the return rising?

THX for sharing! Nice looking website too.

Hi,

I want to use it on my page. But if I take the full directory of source codes, where should I keep them?

Thanks.

Great functions. Thank you. One problem I ran into is that the code doesn’t work when the menu unordered list is included in the document via a prototype ajax Update() call. The script tag including the javascript is included in the main document. The menu itself is included via HTML that is inserted via an Ajax call. The menu doesn’t work in this case.

Hi
This is a great script! I’m doing this site for a non-profit and it looks great in ff, but when I previewed it in IE7 the lis are not floating left, but stacking. I think its my CSS, but for the life of me I can’t find it. Any ideas?
Thanks

Just to add to my earlier post; I had created two instances of the menu tree, ‘top’ and ‘bottom’, each within its own DIV for positioning. The text is in a third DIV, and the whole lot within a ‘wrapper’ DIV.

In Chrome the dropdowns occlude the text, but in IE7 it seems to require the addition of z-index:-1, otherwise the text display over the dropdowns.

Oh thank you sir. You are a genius. After suffering the IE flickering due to using the wrong doctype, I also ran into the position:relative problem. But now it is working beautifully. Thank you for sharing – you rule.

oh my… finally found it. Big thank you Michael!

Hello all prenz. I’m new here. so sorry I’m not good in english. I really like this menu add for my website b’cuase it’s so nice n smooth dropdown I havent seen b4. many times I try to do with ur source code but still cannot realised in my web. plz if anybodi here can help me. I’m very proud of u all guys.. thanks u so much..of course to our webmaster here..u r very great..

Hi Frnds,

Can anyone tell me the solution how to solve the flickering problem in IE 6.0 version. Thanks in advance.

your code is absolutely insightful, it is like C code expressed in javascript or something
great work, i’d love to see your work in jquery modules, hope you include such versions in scriptiny

Hello Michael,

I’d like to use your elegant script for the drop down menu in an educational toolset we’re developing at UC Berkeley, CA. I need the menu to appear on “onclick” instead of as a rollover. I adjusted the the DT area to:

<dt id=”one-ddheader” onclick=”ddMenu(’one’,1) onmouseout=”ddMenu(’one’,-1);”></dt>

This has the desired effect, but if I mouse quickly on and off the menu a few times it jams up, and will no longer present the full menu on a subsequent onlick.

If you have a moment, could you lend advice on how to safely modify your script for onclick behavior?

Thanks much,

Matt Fishbach
UC Berkeley School of Education

Great script thanks.

Im trying to make the dropdown from images, has anyone done that?

Can i see an axample or some advice? The first dropdown works great but cant get the 2nd one to work.

Im going to have to do about 5 of them from different image links.

Thanks

Hi,

Awesome script, exactly what i’ve been looking for. I’m looking to use the slideup version of this menu, but am struggling to see the difference in code between it and the dropdown version. Is anyone able to tell me where i should be looking and what code i should be changing? It’d be a massive help!

Thanks,
Neil.

this is great! how would you make submenu1 horizontal?

Michael,
I am really new at this and I don’t know where to insert this in the css file.. I have tried lots of possibilities, but I am lousy at this.. Could you help by explaining me as detailed as possible?
Thanks!

wow nice, best fader as one commentator said..i agree

This really is a great script, thank you! Many posts back, someone commented that it doesn’t degrade gracefully with Javascript turned off. I’m wondering what exactly they mean. With Javascript disabled, the drop down effects don’t work, rendering those menu items hidden. But, the layout of the page is maintained, and your main level navigation is intact (as it is all CSS and HTML based). This worked excellent for me because the main menu links go to a “section index” anyway, where those sublinks are available in a different form. The drawback is that it takes two clicks (instead of one) to reach the content you really want. I can live with that. Besides, for browsers that don’t take advantage of CSS (i.e. for the blind) those submenu items certainly will show, in the proper flow of the HTML. Sweet!

Thank you, Mr. Leigeber, for setting this fantastic script loose for the rest of us.

Ver nice script! I’m wondering if it could open upward. I have a menu that lines the bottom of the website and would like it to go in reverse direction. is that possible with your script?

Hi Thanks for the dropdown menu. Awesome code!!!

I have one problem in IE7. Every time you mouse over the menu the menu drops perfectly and then expands to the right… Can any one help see link below. Is it a CSS problem?

http://www.retail.org.au/index.php?theme=ara-skin

One bug I would like to report which shows up clearly even on your own example with a IE7 browser. To repeat the bug, 1.Open your demo in an IE7 browser. 2. Make the window so narrow that the menus form 2 rows. 3. Put the mouse on the upper row menu and you see that the upper row menu gets hidden behind the lower row menu. This is only in IE7. Mozilla works perfect.

Thank you for this powerful script. It saved me a lot of time !

IE8 is slowing down the Javascript dropdown animation. Why am I not surprised.

Hi mate,

I love your menu, very nice and helped me a lot.
I am trying to understand your scripting in the javascript file.
is there some sort of documentatoin that describes the functions?

Cheers

Thank you, it appears quite useful for visitors such menus))

Hi, thanks for this wonderful plugin. However, as it’s pointed avobe, if the submenu is wider then the menu item, the animation gets ‘cut’, only deploying its full size after a time. Did anybody fix that ?

Thanks in any way, it’s a very cool code.

Hi,

I love your scripts, and am trying to implement this one onto a clients site. I am having a problem with IE7 though that the menu seems to go into a continuous flicker. The page is fine on Firefox though.

Any ideas what I have got wrong – it is something in the code as the demo works fine.

Also, I am struggling to set the lengths of the top level boxes and the dropdowns to be the same. Again sometimes I can get it right in Firefox and sometimes in IE7, but never in both.

Must be me, but can’t work out what is wrong

Thanks

found the issue it was my doctype – works perfectly now thanks. Love it!

This menu is just so easy to install and style. Thank you so much!!

[...] JavaScript Dropdown Menu with Multi Levels [...]

I tried to implement it on a site but the drop-down menu goes behind the google ads.

[...] JavaScript Dropdown Menu with Multi Levels [...]

[...] JavaScript Dropdown Menu with Multi Levels [...]

Instead of having each menu side-by side, I would like to use this code for a vertical menu. To that end I have changed the menu floats from ‘left’ to ‘top’. It works fine except that the a small gap appears between each menu – but only after a menu has been activated.

I ADORE this menu. It’s hot!!! Thank you!

I have an issue in IE7 and IE8 that i see posted above by shaun as follows. Has there been any fix for this yet?

<previous post here>
Hi Thanks for the dropdown menu. Awesome code!!!

I have one problem in IE7. Every time you mouse over the menu the menu drops perfectly and then expands to the right… Can any one help see link below. Is it a CSS problem?

http://www.retail.org.au/index.php?theme=ara-skin

shaun on 16 Mar 2009 at 9:44 pm

very nice!thank you

[...] JavaScript Dropdown Menu with Multi Levels [...]

Hello sir, I am a newbie in javascript. I saw your code and design. It was fantastic. But I am having some difficulties understanding your code. Could you please help me out by explaining your code? It will be very helpful for me….

Nice post & drop down method. Its very useful to me.

Thanks, a very useful menu!

I’ve rewritten the code a bit for Prototype, as I’m using it on a Magento (http://magentocommerce.com) site and can make it available if there is interest (th.geist@spamsucks@googlemail.com).

The script works really well in FF an Saf. but it’s a little buggy in IE. and only on 2 pages but not all. All the pages are consistent so I am not understanding why only 2 pages are affected. Can you help me with this. It’s truly frustrating. . and I love this script..

Also, someone said that it doesn’t work over flash? I put my flash in iframes on the page so that it doesn’t conflict with AC_run.. ..js script needed for flash. It works fine. .

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

Hi,

For those who are having problems with IE, especially IE7, Use: *+ html before your CSS code. I usually don’t like hacks but this works for IE7 and IE 8 doesn’t need it but if you want to keep IE7 customers, use it. Basically copy the CSS code and put *+ html in front of another line of the same code and IE7 recognizes it.

This is really well done, Michael. It seems to work in all the browsers I’ve tried it in, EXCEPT…get this…Firefox 3 in Linux! Go figure!

I’m using Firefox 3.0.10 on Ubuntu 9.04. The first-level menu pulls down just fine, the submenu pops out fine, BUT, when I try to move the cursor into that submenu, the first-level menu rollls everything back up. It doesn’t do that in Firefox 3 on Windows or Mac OS X.

Very peculiar.

This is just great! But there needs to be a delay when you leave the menu as it makes it very difficult to select items that fan out. Is there any way to add a 1000ms delay onmouseout? That’s the only flaw with this script…

This menu is going behind other items on my webpage. Well the drop down lists are.

Is there a way to prevent this from happening?

@ ignacio

Nope it didnt solve the flickering for me. I will implement it on my site and see what happens. I will only need one menu to dropdown maybe that will help the issue.

[...] 3. Çoklu Seviye JavaScript Açılır Menü [...]

fantastic code thank you so much, it’s clear and clean, a pleasure to look at!

question for you tho:
i have been trying to implement this code on a site with quite a few top menu buttons.
i am trying to keep those buttons on the same line (instead of them cascading down to several lines when i collapse the browser box).
for some reason, if i can make them static on one line (overflow hidden if box is too small), the drop down stops functioning, and if i try clumsily embedding into a table, functionality also disappears. any ideas?
it’s driving me insane!
thanks again for making this code available to others ^^

@METAPHIZIKS. @patrik, @medleji, @Dan Delaney

I too have problems with certain Fedora distros (FC6 & FC10 not working; FC9 works – go figure).

If anyone solves this issue please post your fix.

TIA. Mike

You scripts are the best out there. I love using these as a lightweight alternative to frameworks like JQuery and MooTools. Nice work!

@Adam and others, the solution you're looking for (for the width jump in IE) is:

c.style.width=200

Add it to the .js file so the string would look like this:

if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0; c.style.width=200}

Change "200" to whatever width you need.

@Adam and others… to solve the issue of the width problem in IE:

add this to the line in the .js file:

c.style.width=200

so it will look like this:

if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0; c.style.width=200}

(Changing "200" to, of course, whichever width suits you.)

I read above that some guys are asking about how to add multiple instances of this DropDown menu. It is something easy to do once you get into it heh!.

I had a requirement for a site to implement a DropDown like this in a GridView (ASP .NET), So this means that the number of instances of this DropDown was depending on the records shown in the GridView.
In other words, the DropDown is generated totaly dinamically.

If somebody needs to do something like i described above, please feel free to contact me via email at miguelitoxd@gmail.com so I can provide you the code.

I believe I have a solution for those in need of a transparent background in the subnav items. NOTE: this has been tested on IE6 (PC), IE7(PC), Firefox3 (PC), Firefox3 (Mac) and Safari (Mac) only and ONLY applies to background colors, not background images.

In your Javascript, replace the last twelve lines of code with the following:
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter='alpha(opacity=92)'; c.style.opacity='.92'; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity='.92'; c.style.filter='alpha(opacity='+(o*92)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();

Everywhere you see the number 92, this number represents the opacity. It will need to be the same in every place but you can set it to any number between 1 and 100 with 100 being fully opaque or 0 being transparent. I wanted something just barely transparent so I went with 92. *BE SURE to only replace the numbers in this new code. Some are decimals and you don't want to lose those points.

Then in your CSS, set a background color for ul.menu ul li Again, this is only for background colors in the subnavs, not for background images. Good luck.

Yes, i've also have flickering problem on IE 6. Is there any solution?

I was planning to use this menu for a new website and I had two questions. If the dropdown part becomes too long, it won't fit in the screen. Is it possible to create columns in a dropdown part? In my case the will be short team names in it.

My second question is if it would be possible to convert this menu into a slide up version? I have seen another version on this site with a slide up option, but I can't find out how to change this dropdownmenu into a slide up.