JavaScript Dropdown Menu with Multi Levels

• Pierre

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

• http://www.estudio-cinco.com/ Eduardo

  Really really amazing… thanks a lot! I always use your js… They are always the better one!

• http://www.aldrinponce.com weblizzer

  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

• Pingback: Menú desplegable con varios niveles con JavaScript » Cosas sencillas

• http://www.jamesfairhurst.co.uk James

  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.

• http://littlesnails.com Bob

  I’ve been trying to make good looking dropdown menus with like these for ages – and failing. I’ve been wasting my time – these are superb and perfect for my needs. Thanks.

• http://madisonforms.com Tim

  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.

• http://richardlemon.com Richard

  Wow, cleanest JS drop down I’ve sen in a long time. Thanks for sharing!

• http://www.leigeber.com Michael

  James & Tim – Thanks for the suggestions. These will be in the next version if not before.

• Pingback: Sliding JavaScript Dropdown Menu - Web Development Blog

• http://www.duzodesign.com Timothy

  Very nice. The fading is used very well.

  Thanks!

• http://www.eligrey.com/ Elijah Grey

  I just so happened to need to make a multi-level context-menu script from scratch soon because I couldn’t find anything that was just <em>part</em> of a larger javascript library or an extension to one. Thank you so much for making this. (I hope it isn’t to hard to keep the menu dynamic and repositionable)

• http://hi.baidu.com/webworker seektan

  good job! both visual effects and code concision

• http://blueridgesoftwareinc.com/SU/NewWebSite/ Don Blaylock

  This is one of the nicest menus around. Nice work! I am having one small problem in IE 7. The sub menu items start flickering once they’ve become visible. Any ideas on what’s causing the problem? Also, the width is not rendering the same between FireFox and IE. IE is much shorter in the width. I double checked and even removed all the other code from this file thinking that it was some CSS I had in there that was making the menu flicker and size differently. View the page in both browsers and you’ll see what I’m talking about.

• http://blueridgesoftwareinc.com/SU/NewWebSite/ Don Blaylock

  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. )

• http://blueridgesoftwareinc.com/SU/NewWebSite/ Don Blaylock

  OK I found the problem to all these issues. It was in the header or meta tags somewhere. Not sure exactly what it was but I just copied all the code from the HTML tag down to the BODY tag and it fixed everything. Sheeeesh! )

  http://blueridgesoftwareinc.com/SU/NewWebSite/

• Reza

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

• elvisparsley

  It does not degrade gracefully without js.

• Nancy

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

• http://littlesnails.com Bob

  One small point… I incorporated this into the site I’m building and found that the test page I was working on didn’t validate with W3C. When I had a look at the html I found that the first <li> tag and last </li> were the problem. The menus work exactly the same once they’re removed too.

• http://www.leigeber.com Michael

  @Reza – The change would be css-based only. Just alter the left position of the sub unordered lists.

  @elvisparsley – I will work on the degradation as soon as possible.

  @Nancy – Not currently but I will be sure and include this in the next version if not before.

  @Bob – Thanks for catching that, it was actually just the first <li> that needed to be removed. The script has been updated.

• http://blog.gudigundla.com Sai Gudigundla

  The Menus look beautiful. Gr8 job Michael.

• Nancy

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

• http://littlesnails.com Bob

  one more tiny little thing… and this one’s really weird (or I’m too stupid to spot what’s going on), if the dropdown menus appear over an element that is css position:relative that element overlays the menus but only in IE7 (I haven’t checked IE6) but this doesn’t happen in FF for pc or mac or Safari. It’s not a problem for me because all I had to do was set a minus margin value instead and it works fine.

• http://- Justin

  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

• http://www.leigeber.com Michael

  @Bob – Thanks for the heads up, I will look into it.

  @Justin – I would need a link http://www.leigeber.com/contact/

• Pingback: Links for 2008-11-27 [del.icio.us] | Blog do Camillo - O dia-a-dia de um Desenvolvedor Web

• Pingback: Lightweight Multi-Level Drop-Down Menu | Greep It

• Daniel Arnolf

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

• Pingback: Lightweight Multi-Level Drop-Down Menu | SulVision

• Arthur

  Brilliant menu thank you for sharing it with us.

• Pingback: Serve un menu dropdown? | Fidicaro.net

• Brandon

  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?

• Ivo

  Hello,

  On my site I have two menu but I can’t realize both to work.

  Can you tell me solution of problem.

• http://mitchkat.home.comcast.net/~mitchkat/disclaimer.htm Mitch

  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?

• Luke

  @Mitch – this could be a FF3 propogation problem, perhaps using the stopPropagation() function on the mouseover events would help, so the parent element mouseover doesn’t fire too. Great code though, i will have to try prototypes. I like the funtions assigned to variables, looks elegant

• Dylan

  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

• Dylan

  oh i just noticed, it works in Internet Explorer but not in firefox

• Ivo

  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.

• METAPHIZIKS

  It seems to have an issue in firefox. I tried to rollover one of the list items with an arrow to spawn a sub menu, and when trying to rollover the sub menu the entire menu resets.

• Pingback: Free Download JavaScript Dropdown Menu with Multi Levels - WebStockBox

• Alice

  @Don Blaylock
  i’ve got the same flickering of 2nd level menu in IE6. After opening some submenu once it doesn’t close on mouseout and keeps flickering.

  Looks like it appears in IE if the embedding html doesn’t use the doctype transitional:
  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

• http://www.netcompose.com Denver Web Design

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

• asdf

  Not compatible with IE dude
  the menus goes blinking after selected

• Keith

  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?

• http://webitect.net Kayla

  Very cool tutorial, thanks for sharing.

• Brad

  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

• andrew jebose

  please i need a script java and php scripts for 3 to 4 drop down options when i click on the first one it loads to the second one when i click on this second it laods the third one when i click on the third it loads to the fourth

• http://comparenetbooks.org/ Antares

  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.

• hunter

  Fantastic! This is wat i’ve been looking for…

  However, Is there any way i can remove the parent/child node in runtime?

• http://www.leigeber.com Michael

  @Ivo – You must first create a new object and then you can initialize it as you did the first.

  @Mitch – I do not see that issue in my demo. Send me a link where you are experiencing the problem.

  @Dylan – I would have to see it. It might be something as small as a white space.

  @Brad – The issue is actually with your flash. I believe it is the wmode you need to set to transparent on your flash object.

  @Antares – I would suggest first looking out how you have floated your layout and also try setting a high z-index on the dropdown container.

  @hunter – I am confused by your request. Please clarify what you are wanting to achieve.

• edgy

  I want to create two menus in one page… the problem is that the 2nd one dosnt drop down. I cant understand how to make that new object. If isnt a problem to you, can you explain how and where to create that new object.
  Its really important.

• Dave

  I love this script, but how do you integrate it with WordPress? If I have a dynamic sidebar, how do I get the proper classes/ids defined within the HTML in my header.php when it is calling wp_XXX WordPress functions?

• Filip

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

• JSigned

  I’m not a java guy and the fact that someone will put this up for all to use is unbelievable. What I’m trying to work out is how to have one script for many html pages. My current site has a java menu that I can change one file and have the changes show up on all of the pages. This script would be PERFECT if it could do the same thing.

• Paul

  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 )

• hunter

  Hi Michael,
  I am looking for a way to remove some of the list item at certain circumstances. For Example, referring to your demo above, am I able to remove Navigation Item 4 under Dropdown One when page load?

• patrik

  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.

• http://www.adiulici.com/ Adi Ulici

  Very very nice one!
  I love it: it’s easy to use and fast
  Very good work!

• medleji

  any word on the linux issue? i’ve noticed it too even yur demo is not workin on linux

• Naman

  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?)

• Daedalus

  Hi and thankyou thankyou thankyou! Amazing script. I Have a weird question that maybe you assist with.. I want to include a dropshadow on the dropdown menu, but my javascript experience is quite limited. Can you suggest a method? I don’t mind researching if you pointed me in the right direction.

  Thanks again!

• cynthia

  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????

• aaqib mukhtar

  hi great work dear,

  i just want to ask that can we use delay with this menu so that when the cursor stays on menu for let say 10 sec. and the menu then disappears.. means when the user is ideal doing nothing just mouse pointer is on menu for 10sec the menu just disappear

  Aaqib Mukhtar

• cuppycakes

  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!

• cuppycakes

  also. how could i get this to be centered?

• http://www.321agency.com Greta

  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?

• http://www.321agency.com Greta

  After a little playing around, I got it. Took me a while to realize that it had to be first in, last out as far as setting the var and initilizing it.

  <script type=”text/javascript”>
  var menu2=new menu.dd(“menu2″);
  var menu=new menu.dd(“menu”);
  menu.init(“quicklinks”,”menuhover”);
  menu2.init(“main”,”menuhover”);
  </script>

• Pingback: » 10 Brilliant Multi Level Navigation Menu Techniques

• Pingback: jordandots » 10 brilliant Multi Level Navigation Menu Techniques

• http://racy.com rick

  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!

• http://racy.com rick

  with jquery on the same page I am doing the init in a separate javascript block and the error I get is:

  w has no properties (on line 5 of the javascript file.) I tried making the commas semi-colons, but that still didn’t help. Any ideas?

• http://kychildnow.org Chris S

  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.

• http://kychildnow.org Chris S

  p.s. Here’s how I put it to use:

  http://www.kychildnow.org/index.php/test

  I’d really like the menu to close instantly (or closer to it) while the down happens nice and slow.

  Very cool stuff. TY again

• supriya

  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.

• Pingback: 10 técnicas para menús multinivel | Clearfix

• Phippster

  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.

• speed

  Hey thanks a lot man!

  This is a great script, I’ll make sure I put it to good use

  The only thing I desire is a delay on mouseleave like Tim also noted, without that its pretty… quick lol!

• http://steveclarkprojects.com/whiasite2009/ Steve Clark

  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

• John

  Excellent menus; just what I was looking for. However, I’ve encountered an odd disparity between IE7 and Chrome; I’m using your downloadable example to play around. In Chrome the dropdown menus occlude the text as I’d wish and expect. In IE7 the text displays over the dropdowns. Adding z-index:-1 to the CSS for the text <div> works a round the problem, but is there a better solution? Am I (or the CSS) missing an opacity setting somewhere? You may gather that I’m no expert!

• john

  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.

• Seb

  How do the t, z and s variables govern the time? I’ve experimented with a few different values but it seems a bit strange.

  Also is there any way of making this work in Quirks mode? I’ve got an issue with css in IE6 so have had to force it into Quirks mode using <?xml version=”1.0″?> but this seems to provide the blinking issue mentioned above.
  However, in standard mode I solved the blinking issue by using charset=iso-8859-1 in the content-type meta tag.

• http://twooldfreaks.com Grant

  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.

• Pata Nahe

  Abay yaar kia banadia to nay ho hee pagal saray

• http://www.imarkdesigns.com Mark Rivera

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

• John

  If one wanted a version where the menus ope upwards, rather than down, what would need to change ikn the javascript (I’m no java programmer). Thanks for an excellent set of menus.

• http://www.hasfa.myportal.my Hasfa

  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..

• shankar

  Hi,

  In IE 6.0 version, menu keep on flickering. It’s working fine in mozilla firefox. Html doc type had set up properly. It’s same like in the provided code. I could not nail down the problem . Any suggestions ? Shankar.D

• shankar

  Hi Frnds,

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

• http://chaniel.se Thomas Dilts

  I’m shocked. Unbelieveable. The beauty in this is how little java code there is behind it. Just 33 lines. I looked at others that were not half as nice and they took hundreds and hundreds of lines of code to handle each type of browser. You are king!!!!

• dimitris

  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

• JohnnyR

  First off – these menus are fantastic as are many of the other widgets on your site!

  I was also battling the IE constantly moving menus. I have changed the DOCTYPE and charset and that seems to solve the problem, for the most part.

  I do however see a lot of flicker when moving my mouse horizontally from one top menu/list item to the next. for example, It looks as if when moving my mouse from left to right, when leaving one item and going onto the next, not only does the new pulldown display, but part of the old one also displays to the right of the new one. It looks like the old one is still partially active and thus positioning itself to the right, relative to the new pulldown.

  Hopefully this makes sense – it’s really hard to explain. the site is not live yet, so I can’t give a URL.

  Any help would be greatly appreciated. Keep up the great work!
  -John

• http://Wise3@UCBerkeley Matt Fishbach

  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

• Kurt

  Cynthia,

  I’m having the same issue with giving the menu an opacity < 1 in IE. It works fine in other browsers by adding this to the stylesheet:

  ul.menu { ……….; opacity: 0.8; }

  I know that IE doesn’t support “opacity” in CSS and needs a “filter: alpha(opacity=80)” instead, but depending on where I place it, it either does nothing at all or it doesn’t make the submenus appear.

  Has anyone successfully made the entire menu partially transparent? Again, I had no trouble in Firefox but it just won’t work in IE.

  Thanks for your help!

  -Kurt

• Lance

  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

• http://www.lazylive.com Joel

  Hi!

  I found a solution to this problem: when you put a border to the UL element of the sub-menu, the side of the border isn’t calculated, so the whole sub-menu don’t disappeared.

  I had to had this part in the code, to substract the border size to the offsetHeight of the element:
  try{var border = getComputedStyle(c, ”).getPropertyValue(‘border-top-width’);}
  catch(e){var border = c.currentStyle.borderWidth;}
  border=parseInt(border.substr(0, border.length-2))*2;
  var h=c.offsetHeight-border;

  Perhaps there is an more efficient and beautiful way to do it, but I think it can be useful.

  Thanks for your great work!

• Neil

  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.

• http://eneza.wordpress.com Eneza

  This is a great script, I used it to one of my projects. GEEZ Thanks!!!! Easy to configure and customize!

  Good Job Man!

• http://www.rateAprofessional.com michael

  this is great! how would you make submenu1 horizontal?

• Adam

  If you have your sub-level ul’s wider than your menulink’s, in IE 7, the sub-level ul’s will keep the menulink widths until the animation is done. After it finishes, the sub-level ul’s will then expand to their correct width.

  Not a huge deal, but it’s sort of ugly. Any particular way to avoid this? Doesn’t happen in FF (3).

  Thanks in advance. Otherwise, this setup is brilliant!

• Ioana

  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!

• Kiran

  Michael,
  This is a great script, I am using it to one of my projects. I am having a little trouble here in displaying the menu list in a different frame, the top menu items would display in one frame. Would you please help me in fixing this.
  Thanks in advance.

• http://www.brunei-today.blogspot.com bruneiblog

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

• http://ceravolo.com Debra

  I’m really new at this website building and this is exactly what I wanted. It works great and I’ve managed to put images in the menus. One issue I see is in Firefox, when user clicks on a menu and then uses the browser back button the whole list stays open and you need to refresh it to make it normal again. Doesn’t do this in IE7. How can I get it to refresh when the back button is used. Here is a test address of the site I’m working on. Not finished yet.
  http://www.ceravolo.com/new/COSweb/index.html

  Debra

• John

  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.

• http://www.classicbasketballtournaments.com/default.html George Golden

  Great script!
  I’m having one issue upon load. The menus slide to the left on the first hover and then are okay. I’m sure there must be a css setting I have misconfigured. I’m thinking I need to change the setting for padding.

• chip

  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?

• William Kitchings

  I appreciate the code. It works great. I am using it to demo a little project, and didn’t have time to write it myself. Looks great!

• shaun

  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

• ksj

  Amazing! Awesome! Great script, I love it, keep scripting.

• http://chaniel.se Thomas Dilts

  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.

• James

  this has got to be the nicest, slickest menu which maintains perfect simplicity on the internet! I’ve been looking for one for a while now, and nothing compares to this. thanks so much.

• Kim

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

• http://ceravolo.com Debra

  anyone having problems with IE8? I downloaded it today and the title words on my menu boxes are shifting a few pixels to the right after they drop down. This didn’t do that with FF or IE7. It’s annoying. Don’t know what to do about it.

• http://ceravolo.com Debra

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

• http://uucdc.org Craig

  This is great, working with all the different browsers. (The one I am currently using screws up with Firefox and Chrome.) But is there a way of saving the actual menus in the javascript, so that if a menu item is changed, that change is reflected in all of those menu displays?

• Miguel

  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

• Pingback: thinkuser.in » Blog Archive » CSS & javascript Dropdown Menu - Very simple to integrate

• http://boldendeavours.com/ Bold Endeavours

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

• Sno

  I love your menu, but I need a vertical with flyout, with the top level as a link. Any thoughts on making one like this?

• ignacio

  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.

• ignacio

  Hi guys, for those who have a flickering problem in IE6, I solved it by giving a height to the ///ul.menu ul li a///.

  What I did : ///ul.menu ul li a{height:2em;line-height:2em; /*other properties here*/}///

  Can you tell me if that fix it for you ?

  Independently of that, I have a slow performance in Firefox. Does someone have any clue about what can it be ?

  (With a fresh copy-paste from the demo I have the problem anyway, so it must be some element in my html/css which disturbs the code).

• http://www.mortgageq.co.uk/index_new.html Jason

  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

• Chaim

  Thanks a lot! Congratulations on this amazing script, keep up the great work.

• http://www.mortgageq.co.uk/index_new.html Jason

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

• Ashish

  hey.. thnks lots for developing this script.. Its really cool!!
  i’ve included it in a website of mine.. but m having some problem..

  the drop-down menu that comes up when hovered on the main menu tabs.. shows beneath the div tags on the web-page…. so plz tell me a way to move the drop down menu to the front of everythin… this is happening only in the IE..
  Kindly do reply asap!..thanks!..

• Webslinger

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

• Pingback: 25 Scripts for Dropdown Navigation Menus | Vandelay Design Blog

• Pingback: 25 Scripts for Dropdown Navigation Menus | FamousandSpicy

• Pingback: Web Page Design For You » Blog Archive » 25 Scripts for Dropdown Navigation Menus

• Vinay

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

• Pingback: 25个很不错的下拉菜单脚本收集 | 前端观察

• Pingback: 25个优秀的下拉菜单导航脚本 « inthinking iphone

• Pingback: 25 Scripts for Dropdown Navigation Menus « WebTaste | Tasting everything online

• Pingback: 25个优秀的下拉菜单导航脚本 | 互联网的那点事...

• Pingback: U-Station Creative

• http://www.greygoat.com/chupa/ Greygoat

  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.

• Pingback: 25 Scripts for Dropdown Navigation Menus

• Brigitte

  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

• http://www.xyzeta.it Michele

  Hi, really great job!
  On my site there were some problems with SAFARI.
  SOLVED: in my page code there are some other simple script loaded.
  Putting the dropdown-menu script tag to be the first loaded… the problem was solved.
  Simply

  thanks, M.

• Mokrane

  Hi everybody,
  For people who have experienced a bug in IE 7 (child menu are invisible), just replace this line:
  if(c.mh==c.offsetHeight){c.style.overflow=’visible’;}
  by this one:
  if(c.mh==c.offsetHeight){c.style.overflow=’visible’; c.style.filter=”;}

  Thank you for the author, this scrip is really impressive

  Mokrane from Algiers

• Pingback: 25 Scripts for Dropdown Navigation Menus | Easy Street Interactive Blog

• http://... frdev

  Thanks so much for the code!

  I found to create multiple menu objects on a page (e.g. for 1 menu in each table cell to avoid wrapping issues) I had to remove the var menu=function(){} from the js and create new objects w/ var menu1=new dd(“menu1″); var menu2=new dd(“menu2″); etc

  Not sure if this is the best practices way, but may help others!

• Archangel

  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….

• Jesse

  Brigitte – I struggled with the same problem where the menu would ‘pop out’ to the right of the expected size in IE. I found that if I set a small width to ul.menu ul the problem goes away…hope that helps.

  It seems that in IE and Safari, the drop down menu box and text are about 2px longer than in FF (you can even see it in the demo, before any changes are made). So, when you define each list item and center it, as I have done at – http://s280121601.onlinehome.us/ashgrovegardens.net – it just doesn’t look good in IE and Safari – has anyone run into this?

• http://www.vinkas.com/ Vinoth Kannan S

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

• Tom

  I too am having the issue in IE7 where sub items that are wider than the parent are restricted to the width of the parent until they’re done expanding to their full height.

  As a workaround I’d be happy to turn off the expanding effect and just stick with the fadein effect.

  Can anyone tell me how to turn off the expanding effect?

• http://www.bilderfarm.de/ Nightfly

  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).

• http://www.bilderfarm.de/ Nightfly

  @ignacio: The width issue is also fixed in my version.

• http://www.bestrangefruit.com kristin

  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. .

• Pingback: 25 Scripts for Dropdown Navigation Menus | Designurimagination Blog - Let Your Imagination Fly

• Pingback: Sliding JavaScript Dropdown Menu « Web Development Bangladesh

• Nick

  Awesome script. Have been using it for a while now.
  Ran into a problem in IE though. Something that hasn’t been mentioned.
  Any advice from anyone who has used this would be greatly appriciated!

  If you place the menu on a transparent background div, in IE, the drop down menus don’t appear! As soon as you take off the opacity the menus work like a charm… Any ideas or suggestions for this?

• http://ceravolo.com Debra

  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.

• Lukas

  @Nick
  Try to give the ul.menu li a higher z-index than the div with the background

• http://fluidmind.org Dan Delaney

  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.

• Adam

  This is fantastic!

  I’m getting great results in all browsers, except for a small discrepancy I’ve found in IE7. I’m using Windows XP with the ClearType function enabled, though I notice in IE7 that the text in menu items (but NOT the main ‘menulinks’) is displayed as though ClearType is disabled.

  I’ve placed a screen shot demonstrating this at http://www.arostudio.co.uk/menu.gif, with normal text shown for comparisson.

  Has anyone experienced this and/or know a workaround?

• http://lungliu.com Lung

  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…

• http://www.gr88.nl Jos

  Thanx for the great menu.
  I have i question someone already solved but it does not work here..

  I create 2 menu
  <ul class=”menu” id=”footer”>
  …
  <ul class=”menu” id=”header”>
  …

  and i use:

  var menu2 = new menu.dd(“menu2″);
  var menu = new menu.dd(“menu”);

  menu.init(“header”, “menuhover”);
  menu2, init(“footer”, “menuhover”);

  Then only the header menu is working???

  Can someone help me…

  Thanks in advance..

  Greetings,
  Jos

• Wayne Burrows

  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?

• Ben

  Awesome-ness! Nice work mate. Super Slick!

• Ben

  @ 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.

• http://www.dark-wind.com Sam

  Nice work!
  It took me a while to get the menu items to stop appearing below some other items in IE.. I see a few others are having the problem. This sorted it for me in IE7: put the entire <ul> inside a div with a high z-index

  <div id=divMenu style=”z-index: 500; position: relative”>

• Pingback: 10 Mükemmel Çoklu Seviye Menü Tekniği | kumsaati | XHTML, CSS, Creative, AJAX, Design, Tutorials, Web 2.0, Web 3.0,

• George

  Love the tut/code but I am a nubee – When I apply the code it changes the entire background to the color of the button… is there a way I can make them transparent or just allow the button to be the light gray?

  Thank you for your help
  George

• zaki

  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 ^^

• zaki

  oh well i found a way around it nesting some tables around the code now! ^^ hurrah! now working the height of the dropdown slide

• MikeC

  @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

• simon

  I am using agent,

  Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.8) Gecko/20071008
  Firefox/2.0.0.8

  and it renders ok.

  However my opera agent
  Opera/9.64 misbehaves..

  ok in
  IE 8.0.6001

• Michael

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

• http://www.gundogsupply.com Kirby

  Having a pretty serious problem with flickering on all versions of IE that i’ve tried.

  http://www.gundogsupply.com/consys.html

  Also having a problem with the width of the cells in IE. Looks and works perfectly in Firefox and Chrome.

  All help would be greatly appreciated.

  Already tried the doctype.

  Otherwise, it is great. Clearly the problem is something i’ve done, as it doesn’t do this in the demo in IE.

• Steph

  @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.

• http://www.regnatarajan.com Reg Natarajan

  First, I also want to say thanks for this effort. I am having the same flickering problem that Kirby is having. All versions of IE are flickering like crazy. Works perfectly in Chrome and Firefox. I'll check back in a day or two to see if this has been fixed.

• http://N/A Steph

  @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.)

• http://www.gundogsupply.com Kirby

  Update on the problem:

  Uploaded unedited files to the site to see if it was a problem with some of my editing and the problem persisted.

  Don't know what the deal is. Any help would be GREATLY appreciated.

• http://none Mike Medina

  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.

• Pingback: In the Woods - Multilevel Menus with jQuery and CSS

• Caspergrl

  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.

• Pingback: Multi-level Drop Down Menus | Themeflash

• http://akatsukihariini.blogspot.com/ akatsuki

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

• Caspergrl

  In my experience the flickering problem is caused by padding or margins being added in select areas of the style sheets. I can't recall which places I had padding/margins in the past that caused the problem but once I removed it it fixed the issue.

• http://www.mvc19.nl Erick

  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.

• Edd

  This script is really great, but I've found a bug in it. If the dropdown goes over Flash on Mac browsers (I've tested Firefox and Safari, both latest versions) the mouse still triggers buttons//animation in the flash behind it. Has anyone else found this or a way to fix it? Thanks.

• http://androidtux.co.cc AndroidTux

  Could anyone make this work under wordpress??

• http://www.qdigitalstudio.com Susan Snipes

  Regarding questions about time/delay/timing:
  I discovered you can change the variable "s" on line 2 to value of 1 to make the drop down appear instantly. Alternatively if you change it to a value of greater than one (e.g. 2, 3, 4) the animated slide to reveal it will be increasingly slower the larger the number.

• http://www.janchalupsky.com Jan

  Hi Michael and guys around,
  I'd like to change this menu to drop-up one, actually, instead of drop-down.
  Would any of you know how to change the direction of the dropdowns?

• http://www.brassballvalve.com.cn Avery

  First, I also want to say thanks for this effort. I am having the same flickering problem that Kirby is having. All versions of IE are flickering like crazy. Works perfectly in Chrome and Firefox. I'll check back in a day or two to see if this has been fixed.

• http://mstasiak.wordpress.com lethal2

  Hello!
  Menu is brilliant, but I have the same problem as few guys above:

  >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!

  Did anybody resolve this problem?

• Pingback: 30+ Essential Javascript Framework Supported Navigation Techniques | tripwire magazine

• Pingback: Collection of Essential Javascript Framework Supported Navigation Techniques | guidesigner.net

• http://www.hasfa.myportal.my hasfa

  Hi Michael..I like ur dropdown menu style..so smooth & cool. if there any solution to modify more colourful menu..as like me to add for kid website (I'm a newbie designer for portal)..Whatever..u the best smooth dropdownmenu designer..keep in touch. Thanks Guys.

• Nisha

  Hi All,
  this menu control is a great control but i need modified version of this and i m unable to modify it. it has been designed using unordered list as simple menu controls can have. but at sub menu level i need formatted menus like multi coulmn menu and menu data generated dynamically. it's possible in the previous article where it can be expanded to single level but i need it multilevel menu. plz suggest me how to do that? how can i generate custom item in each menu item?

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Graphics

• Pingback: Drop-Down Menu: Usefull CSS Scripts to Enhance Header Navigation | guidesigner.net

• Pingback: 30 Drop-Down Menus - Top of your Mind

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Technology you can trust here...

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - Programming Blog

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | VNAMEDIA Sharing Center

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Internet Marketing Tips and Strategy To Make Money Online

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Download E-Books Free Video Training Courses Softwares

• Pingback: 30个免费下拉菜单式导航 » 淘宝导购

• Sukh

  The flickering problem in IE6 is caused by the timers not being shut down properly. This also occurs in other Browsers they just handle it better (if you profile in FF Firebug you'll note the ddSlide functions are still being called even after you mouseout of the menu).

  That's the issue, what the solution is…I have no idea

• Teresa

  FLICKERING ISSUE in every version of IE
  - I used the template given with out no changes
  - Possible solutions: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
  “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  Not OK, problem persist
  - And ul.menu ul li a{height:2em;line-height:2em;…} Not OK

  I am getting maaaaaaddddd, I read all the foro above, and nothing changes
  Please, what can I do??????????????????????????????

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Mac Bargains

• Teresa

  Flickering, Other thing
  The Demo that is hold in the website is OK
  But if I hold the source code exatly how it is provided it star to flicker in IE.
  So I am wandering why is that. Michael, is that the original code? Seriously, I do not change one line, it just happens.
  Help pleeeease!!!!
  May depends on the server it is hold for some reason??? Because if I see it in my local server it does not happens, but if I hold it in the website…. Flickering every thing

  Maaaaddddddd

• Emma

  Hi! The code is great thanks so much!!
  But I was having one slight problem, i positioned the menu above a div table where the content load up, however the drop down menu opens under the div.

  Do you hav any idea on how to make it above/on top of the div so it is visible?

  Thanks so much!

• Emma

  I have realised this problem only occurs in internet explorer
  Any suggestions

  heres a link http://www.jb.hostzi.com

• dror

  Hi,
  great code, thanks.
  I have an asp website, which contain reports. Each page contain a report that displayed in a table. my problem is that after Im adding the code that display the menu, i can't resize the tables and the divs by adding, for example, style="width:100px" or size="100px" at the table properties. any ideas?
  thanks

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation « test

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | X Design Blog

• http://www.sonicandpals.com Trevor

  Dude…you rock. I love how you did this. I'm easily able to modify the CSS to turn this "horizontal" bar system into a vertical one, and modify the images and sizes and such. Just…brilliant!

• Pingback: 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger

• Pingback: 14 Easy to Implement Drop Down Menu Solutions | X Design Blog

• Pingback: Dropdown Menu with Multi Levels – JavaScript | Ajax Dump

• http://ramonperez.com ramon

  thank you for this code. i am trying to implement it on my website and whilst it works fine on it's own, once pulled into the website it stops working and the menu is displayed as a list. i assume this is something to do with the stylesheet?

  as well i am unsure where to put the 'initialization' code… perhaps this is causing the problem.

  and help would be appreciated.

  the site in question is http://www.butternutsquash.net and the menu is being placed in the top right.

• http://www.mapsedgemedia.com Bill in Kansas City

  I am unable to overcome the IE flickering issue, and changing the doctype on the current project is not an option. Doing so destroys the formatting of the site. A beautiful script, to be sure, but beyond my ability to find the answer to the issue.

• dror

  hi again,
  My problem now is how to make child menu appear above parent menu?. the problem appears in case the parent menu is too long for the screen and starts new line. in this case the first child of the first parent can't be opened because the parent menu bellow is opened.
  Alternative solution could be avoiding the menu to start a new line
  by the way, I managed to solve my first problem, putting "px" when using "width" in the style
  thanks

• Jasperf

  I'm having some trouble with this script combined with a css png fix for IE6…
  When I enable the png fix, the menu doesn't work, and when I disable it, everything works fine but the png images don't show their alpha transparancy.
  Any ideas?

• Pingback: 14个下拉菜单解决方案 « SonicHTML – 高品质 HTML+CSS 服务

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | WEBDESIGN FAN

• Mike

  Here is a solution to the flickering issues that some have described above. Ad 1px of bottom padding to ul.menu .menulink. This occurs if you remove the bottom border to ul.menu .menulink.

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | MEN blog . net

• Chris Jordan

  I had the problem some others have reported in IE6 where the drop down menus were covered up by a relatively positioned element. I fixed it by setting a high z-index on the containing element for the menus, _and_ a higher z-index on the element containing that one. I got the idea from here: http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/

• Korsakov

  Why doesn't anybody consider a pull-out menu containing several columns in case the number of items in the menu exceeds the page height? Also, it is often easier on the eyes and serves better oversight. Thank you!

• Pingback: gamma agency – drop down menus js

• Kevin

  Thanks, Michael. This was easy to use out of the box, and I've really learned a lot about JS by trying to figure out how your script works.

• Miss Ma

  I tried to make a vertical menu out of your nice code. And it works in Safari and firefox but not in IE ?
  The menu underlevels will not hide again
  Please help and thanks for a nice code

  - MissMa

• Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions | Graphic and Web Design Blog - Inspiration, Resources and Tools

• Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions | huibit05.com

• Pingback: Drop-Down Menu: 30+ Useful Scripts To Enhance Header Navigation « Photoshop.vn – Your Design Resource

• http://n/a Rob

  Michael, VERY nice script!!

  One issue I have run into with it, however, is when I have a different background for each one of the main links, the hover state does not stay on when I move the cursor on the sub nav. Do I need to edit the script.js for this to work?

  The hierarchy of the list looks like this:
  <ul id="menu" class="menu">
  <li>Link1</li>
  <li>Link2</li>
  <li>Link3
  <ul class="dropdown1">
  <li>sub link</li>
  </li>
  <li>Link4
  <ul class="dropdown2">
  <li>sub link</li>
  <li>sub link</li>
  </li>
  </ul>

  Any help would be greatly appreciated!

  -Rob

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Lunch Time Laugh

• Niko

  Hey Michael

  How do you get the menu in the center of your page??

• Pingback: 30+ Drop Down Menu Scrips | oOrch Blog

• Pingback: Colección de menús multinivel desarrollados con jQuery y Mootools | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog

• Chris Dennis

  How can I make this clickable, instead of mouseover. ? Any help would be much appreciated.

• Pingback: 30个免费下拉菜单式导航 » 淘宝吧

• Alex

  Hello, I am having the same issue as Debra below from an earlier post, is there a way to fix this? By the way your Dropdown Menu is the best I have seen so far.

  "I’m really new at this website building and this is exactly what I wanted. It works great and I’ve managed to put images in the menus. One issue I see is in Firefox, when user clicks on a menu and then uses the browser back button the whole list stays open and you need to refresh it to make it normal again. Doesn’t do this in IE7. How can I get it to refresh when the back button is used. Here is a test address of the site I’m working on. Not finished yet.
  http://www.ceravolo.com/new/COSweb/index.html

  Debra
  Debra on March 11, 2009 at 9:54 am "

• Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions - Programming Blog

• Pingback: Hot Collection of Free jQuery And CSS Drop Down Multi Level Menu Solutions | guidesigner.net

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | 9Tricks.Com - Tips - Tricks - Tutorials

• http://homeownerinsurancehq.com/ HO

  How can I make this clickable, instead of mouseover. ? Any help would be much appreciated.

• Pingback: Scripts para menus desplegables para tu web | Ayuda para tu Web y Blog

• http://glassfittings4less.com/ preejith

  I’ve implemented your dropdown menu, and it looks beautifull. I only have a problem with IE6. When I integrate it in my site, the dropdown appears under the main category . Look here >http://glassfittings4less.com// . Any idea how to fix this ?

• Pingback: Sliding JavaScript Dropdown Menu « Web Development

• james

  Hi,
  Did anyone figure out how to initialize 2 different dropdowns on the same page? Tried to use Greta's hack but it didn't work, any ideas?

• Joe

  Hi Michel,

  Very nice menu! We are also trying to implement this to "slideup" rather than down. Can you please advise as to what we must modify in your script to achieve this. Any help is well appreciated.

  -Joe

• stephanie

  does anyone know how to reverse this? make the menu pop up instead of down? thank you!

• Jock

  I'm not sure if the flickering I see in IE7 is the same as what others have mentioned, but the right side border flickers when quickly trying to access the next sub menu. This can be solved by adding an extra 2px from 148px to 150px here ul.menu ul ul {left:150px Whilst there will now be a gap between the sub menu, it stops the flickering. The other option is to edit the js file on line 2 to make the s variable a lower number like 3 instead of 6. This will make the sub menu appear faster.

  The biggest problem I'm having is with Opera. The sub menu drops down very slowly when over another element below. Anyone checked this?

• http://none Kevin Raleigh

  I am looking for a menu that is IE 6 at least compatible.

  If I remember correctly z-index is not available before IE 8
  That and right now I am not in a position to determine if the drop down menu will work on
  IE 6, 7 as well as earlier versions of other browsers.

  With this in mind can anyone tell me if I can use this incredible piece of work on earlier versions of browsers? It is the best menu I have seen to date.

  Thank You
  Kevin

• Pingback: 21+javascript导航代码-paranimage » 设计 网络 波鞋的一一贴

• Jeff

  Great menu… but is there a fix for the dreadfully slow animation in IE8?

  Can't use until it works correctly in IE8. Thanks!

• http://www.hileywood.com.au Nathan

  @Debra, @Alex – I made a work around for the 'Back' button issue in FireFox. Basically you need to replicate the 'mouseOut' processing that's in the javascript.
  Reset the class name for the menu header (eg Dropdown One), set the height of the child <ul> element (your list) to zero and set overflow to 'hidden'.
  Example:
  myMenu.className=myMenu.className.replace('menuhover','');
  myList.style.height=0;
  myList.style.overflow='hidden';
  Unfortunately, (probably due to my lack of expertise) I could only make this work by effecting these changes in the onClick event of each link.

  Anyone with a cleaner solution please let me (us) know.

  Cheers,
  Nathan

• Umair Jabbar

  Can this dropdown be implemented with right aligned menu items ? as currently they are left aligned

• George Donev

  Here is a bit easier to call class for usage on the whole page by using a class to identify the Unordered list:

  // Drop Down Menus
  var menu=function(){
  var t=15,z=50,s=6,a;
  function dd(n){this.n=n; this.h=[]; this.c=[]}
  dd.prototype.init=function(p,c){
  a=c; //Old code: var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
  //new Code I pass on already extended object as the holder for the menus
  var w=p, s=w.getElementsByTagName('ul'), l=s.length, i=0;
  for(i;i<l;i++){
  var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
  h.onmouseover=new Function(this.n+'.st('+i+',true)');
  h.onmouseout=new Function(this.n+'.st('+i+')');
  }
  }
  dd.prototype.st=function(x,f){
  var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
  clearInterval(c.t); c.style.overflow='hidden';
  if(f){
  p.className+=' '+a;
  if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
  if(c.mh==c.offsetHeight){c.style.overflow='visible'}
  else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
  }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
  }
  function sl(c,f){
  var h=c.offsetHeight;
  if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
  if(f==1){c.style.filter=''; c.style.opacity=1; 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=o; c.style.filter='alpha(opacity='+(o*100)+')';
  c.style.height=h+(d*f)+'px'
  }
  return{dd:dd}
  }();

  var _Menus = new Array();
  function initializeDateDropDowns(){
  var box = document.getElementsByClassName('dropDownMenu');
  if (box.length > 0) {
  for(i = 0; i < box.length; i++) {
  var id = box[i];
  _Menus[i] = new menu.dd('_Menus[' + i + ']');
  _Menus[i].init(id,"menuhover");
  }
  }
  }
  window.onload = initializeDateDropDowns;

• http://www.leigeber.com/2008/11/drop-down-menu/ Avrnicus

  Hi, thanks for the great script, but I have a problem with the scrollbar when item goes
  below one page, it goes back very fast therefore I'm unable to see the item menu that goes below one page. Does anyone know how to fix this issue? Any help will be appreciated. Thanks!

• Pingback: 30+ Essential Javascript Navigation Techniques « VECTOR Tutorial

• Pingback: 30 adet css drop down menü | FaydalıWeb | Internetin Faydalı Yüzü

• Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions

• marian

  Excellent piece of work. Unfort, in IE the animation is killing the processor. It spikes to 60% + usage.

  This is not happening in FF. I had to scrap 3 days of customization because of this processor usage issue and I see no way around it other than finding another dd script

• Pingback: 38 jQuery And CSS Drop Down Multi Level Menu Solutions | Theme Center

• Pingback: Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazine

• Pingback: Styling HTML Lists with CSS: Techniques and Resources - Webreweries.com

• joey

  hi- this is great but how can i get it centered on my page? thanks!

• http://www.lungliu.com Lung Liu

  Has anyone found a workaround for adding a 1 or 2 second delay after the cursor leaves the menu? Otherwise, it just disappears too quickly. It is making it very difficult to choose menu items and after several months, I'm still trying to figure it out.

• Patrick

  Hi,
  I used the old version of this dropdown (http://sandbox.leigeber.com/dropdown/dropdown.html). But there is a little problem i don't know how to solve. I use this dropdown within a formular. And when I tab down to the dropdown and tab and tab through the items till i come to my textarea which is beneath. And then, when i want to display the dropdown, it shows me only the last item. Its similar to your example. When you click on the dropdown and tab a few time and then you want to display it it only shows you Item 5.

  What do I have to do to solve this little problem?

• Pingback: 21个漂亮的Javascript菜单特效 « 幻岛|领地

• Pingback: javascript framework articles | lo stanzino di EngiMedia

• Pingback: KIN: Agency for the Arts design is done! « amelia a earhart

• http://www.techgrowthglobal.com Jaypee

  amazing!!!! this what i'm looking for, been trying to figure out on how to do something like this in quite sometime now but here it is, problem solve…dude thank you very much for sharing this!!!

• Nathan

  tried all the ways that was provided on the forum in fixing the flickering problem but done works. Can anyone come up with solutions that would actually fix the problem. I was viewing it through IE8.

• Bojan

  Hi, Michael.
  You dir a great job.
  I consider to use the script for an non-profit page but i am not a java-programmer. Is it possible to export the menu <ul><li> content and load it dynamically from a external .html file, because i need a lot of pages.

  Any help will be appreciated. Thanks!

• http://www.dynamic-website-design-seo-marketing-professionals.com/internet-marketing/home.html Seo4uMarketingGuru

  This has to be the best css javascript menu around I really like it and am deffo going to use it on a project soon. Thanks for your great work

• Pingback: Multi-level Drop Down Menus : swapnil

• http://gaveland.com Atle

  I was just wondering, is there anything I can do to use this menu more than one time in the same page?

  In my situation I need one above the header and one below the header, but if I use the code specified in the example only one of the menus actually works.

  Any ideas?

  Regards
  Atle

• Pingback: 5 laman web untuk anda membuat drop down menu yang menarik! « Cerita Melalui Ape2.

• Mike

  Michael,
  Thank you so much. This is awesome. I've got it working great. One issue. It rolls the menus up and down rather slowly. Is there anything I can do to speed it up? I've tried various things but, honestly the js is beyond my knowledge. I've played with the basic example and it is not slow. I suspect it is because my menu is overlaying background colors, text, etc.

• Alex

  Great script, i had it working but when i took it live to my wordpress site, the mouse out seems to leave the hidden second menu up with a height of 10px and an opacity of 0.24, its not reducing back to 0. its leaving an element.style on the second <ul>

  <ul class="children" style="overflow: hidden; display: block; height: 10px; z-index: 57; opacity: 0.24;">

  Anyone know what would be happening?

• http://www.thinkmintchip.com Margo

  Thanks so much for this script. I think my problem is the same as Alex, who commented last. Everything styles and functions beautifully, but after an initial cleared-cache page load, the dropdown menu leaves a little "ghost" behind, the top level remaining visible on the page with a very low opacity once you move your mouse away. I've had this problem with past versions of this menu as well. Please let me know if you have any suggestions – I so appreciate your help!

• Nate

  Ha, same here! Ghost image left after rollout!

  Glad it's not just me. It's funny how I didn't notice it until today. I've been using it for several weeks. It does not happen on the FIRST dropdown, however. Only on the second and third dropdowns.

• Alex

  I think i know what the ghost image is from, i was using a border of 2px white to drop the second menu down from the top tier. By using firebug i turned off this border and the ghosting disappeared. So i have kind of hacked my css to display the top-border on :hover and only then. so the ghosting now is gone, but the closing animation has a slight jump due to losing the top border on close.

• Pingback: 25 Scripts for Dropdown Navigation Menus « Web design, Photoshop, illustrator tutorials, from beginner to advanced.

• http://www.thinkmintchip.com Margo

  Wow, Alex is definitely right – in my case, too, it has to do with the border on the 'ul.menu ul' class. I had it set to 2px, and when I set it to 0 it eliminated the ghosting issue – BUT it also made it impossible to hover on the top menu level and then jump to hovering on the dropdowns to scroll through them (this might have to do with the rest of my styling – I have no borders around the main, top-level menu items and don't want 'em). The dropdown would vanish on mouse-out. I compromised by giving it a 1px border, which still leaves the teensiest ghost on the first of the dropdowns – prob not visible to someone who isn't looking for it.
  Still – not the most ideal fix. Wish I understood the discrepancy between the shadow on some dropdowns and not others.

• Nate

  ^ forgot to mention the reason I said "forget it" was so you don't waste your time trying to help me debug that site I posted… because I am ripping out all that dropdown code right now and replacing it with something else.

• http://www.bigevilbrain.com/ Alex

  So, I think I may have found a way to make this degrade gracefully without js. Works for me in Safari and Firefox. Haven't tested it in IE.

  Just add this to your CSS:
  ul.menu li:hover > ul { display: block; opacity: 1; }

  For IE, may need to also add… filter: alpha(opacity=100);

• jacob

  Does anyone have any idea how to get rid of the padding around the original button link. I want to use an image for the dropdown source, and when i place an image into the code (with 0padding) its seems to pad it about 5px around all sides. Any help=greatly appreciated

• Jim

  Did anyone ever find out if there was a fix for IE8 as far as the slow transitions? I thought I read somewhere in the forums that there was going to be a new version or something…but I haven't seen it. Does anyone know where the fix is if there is one?

  PS. Great script! Good work! Just need to get that IE8 lagging error corrected.

• Joel

  I am fairly knew to web design, and I am having some trouble getting this menu the way I need it. I have the menu working fine, but I need to make the menu fields about 15px in height. I have changed the CSS to make the menus and the sub menus this height but the actual text is still acting as if it is at 30 px. So the text is hanging off the bottom of the menu tab. It is doing this in the sub menus as well. I have made menus in regular CSS and changed the height with no problem so I am not sure what I am doing wrong here.

  Does this menu only allow a specific height, or am I doing something wrong?

  Thanks, joel

• Joel

  Ok, I fixed the issue with the hanging text. It was a line height issue, and I have my text and boxes like I like them, but now when I mouse over for the drop down menu right after the menus drop the text in the drop downs shifts to the right 1px. I can see it move right after the menu shows up. I have tried changing some of the settings and it still does this. It was not doing this before I changed the line height.

• Syx

  frdev – Thank you! I've been looking for a way to implement multiple menus and the instructions from Michael to create a new object and initialise it just refused to work. Your solution solved the problem!

• http://www.rodrigo-silveira.com/sites.php rodrigo silveira programmer

  Great post. you're a life saver, thanks for taking the time to share your great work, it's greatly appreciated.

• Pingback: 10 Tutorial Membuat Menu Dengan CSS | satudigit.com

• francois

  hey. know what ??

  I'll call god to ensure he will provide you enough virgin in paradise!!!!!!!!!

  I have spent 2 days looking for a great menu.
  I finally found what I want. It is 1am.
  your da man! thx for that.

• http://www.guanafishing.com Stu

  Does the menu support opening links in a frame?

  Thanks.

• http://www.ecomdelta.com PeterR

  Bless you my son! This is Freaking Awesome! Code that lite is like a wet dream.;-)

  Note to others… about centering…

  The quick and dirty fix… put the whole thing in a 1 cell table. It then centers just fine. Sort of a brute force solution I know, but I could not get it to center in any combinations of div tags and the table thing works just fine in every browser I've tried it in.

  The only other alternative I can see is using JavaScript to measure the element, the clientWidth and reposition it. But I consider that more of brute force solution than using a table.

• Pingback: Best jQuery and CSS multi level & Mega drop down menus - Wsblogz.com – Web design magazine

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation | Tut7

• Pingback: css選單教學 | Zimo9

• http://www.mtces.org/ Matthew

  If I created a "menu.html" file that had nothing in it except this menu, could I then use a SSI to include the menu on multiple pages in my site?

  Is there a better way to accomplish the same objective?

• Chris

  You the man!
  I was looking at this script a while back, but for some reason didn't use it.

  The flicker was fixed by using the DOCTYPE as in the example.
  The fact that the menu went under some images was fixed by just chaing the zindex of these images to a low number.

  Now I just need to tweak the CSS, before I can set it loose in the world.

  Many thanks to Michael, and all the people who left ideas on fixes.

• Pingback: 25 liens pour vos menus déroulants | Plantec Florian

• Pingback: 39 tane en iyi jquery Menu | Harbiblog.com - İhtiyacınız Olan Herşey...

• http://www.tomsbikecorner.de/ tomsbikecorner.de

  I was just searching for such an libary for my shop. So i will give that thing a try. Thankx

• Pingback: Drop-Down Menu: 30+ Useful Scripts to Enhance Header Navigation - www.huedesigner.com

• Anthony

  Great script, exactly what I needed.

  Anyone having issues with IE 8, just modify the sl function:

  var ie = 5; // speed enhance

  var d = (f == 1) ? Math.ceil((c.mh – h) / s) * ie : Math.ceil(h / s) * ie, o = h / c.mh;

• Memo

  Very nice script, thanks.

  But I have a problem, my the website is being created using joomla, the script code was placed within a php script that is running it, but Internet Explorer and Opera browsers not synchronized well, what could be wrong?

  One more thing, the website has a banner done in java script and apparently have a conflict to run simultaneously with the menu, the menu stops working and only efficiently execute the banner, what can this be?

  One last thing, as I can put the menu executable in a php without having any flaws and where in the code should put the script?

  Greetings and thanks.

• Pingback: Dropdown Menu with Multi Levels 开源项目 - Ajax代码大全 - Java开源项目 - Menu - Dropdown-Menu-with-Multi-Levels - Java免费软件 - 菜单控件 - 开源网

• http://www.skylimitproductions.no Benjamin

  Is it possible to initialise and get 4 menus to work on one site? I can only get two of them to run. Could you show me?

• http://www.magneticdreams.de Magnetschmuck

  I have changed the CSS to make the menus and the sub menus this height but the actual text is still acting as if it is at 30 px. So the text is hanging off the bottom of the menu tab. It is doing this in the sub menus as well. I have made menus in regular CSS and changed the height with no problem so I am not sure what I am doing wrong here.

• http://free-send.de Kostenlos SMS

  nice site and thanks for the good articel

• http://americanmarriageministries.org Glen Yoshioka

  How would you be able to use two different versions of this drop-down menu with the same js file while having different css styles applied? I'm sure it's easy but I'm a nube.

• Pingback: 35 JQuery menu tutorials that you will love to learn | Web designer training and Resources - Graphic Designer's Blog

• Ravindra

  Hi, I am trying to use the dropdown menu. In my webpage I had to display lot of SELECT drop down list. When I hover the mouse over the menu, the menu goes behind of the SELECT listbox.

  Any solution to overcome this issue?

  Thanks,
  Ravindra.

• Ajax

  Hello!

  I have problem. Some pages in my project loads long time and user don't see it (if user click on link somewhere in submenu). Is it possible to set menu disappearing after click on link in drop-down menu?
  Thanks for reply!
  Ajax

• Simon

  I really need help guys. I am using this fancy jquery multi dropdown menu but unfortunately, I cannot use it together with another jquery script which is a scroll to bottom script. Each time I implement the scroll to bottom script without this dropdown script, everything works fine but immediately I add the dropdown menu, only the dropdown works but the scroll to bottom script doesn't work again. I've tried all I can including the noConflict method but things are just not going on well for me. Below is the scroll to bottom script:

  <script type="text/javascript">

  $(function() {

  var $elem22 = $('#body');
  $('.link').click(
  function (e) {

  $('html, body').animate({scrollTop: $elem22.height()}, 800);
  }
  );

  });
  </script>

  I will forever love the person who helps me out on this lol. But seriously guys this is quite urgent!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

• Bhushan

  Its very good article, but drop downs are not open in IE 6. could u please suggest what to do?

  Thanks,
  Bhushan

• http://www.estudiorwd.com.ar Federico

  Well, i found 1 way to fix the IE transparency problem when i use a semi-transparent image background.

  To fix that, i resigned the alpha 0>100 & 100>0 effect, but at least work wonderfull in ie6, ie7 and ie8.

  The way is:
  1. CSS
  a. set the background:
  ul.menu ul{ background: url(../imgs/semi-transp.png) left top repeat-y;}
  b. set the opacity:
  ul.menu ul{opacity:1}

  2. JavaScript:
  I just coment the changes of opacity:
  a. /*c.style.opacity=1;*/
  b. /*c.style.opacity=o; *//*c.style.filter='alpha(opacity='+(o*100)+')';*/

  The example: http://www.estudiorwd.com.ar/test/Verbano

  That is all. If know a better solution, pls post here

• http://www.pet-onlineshop.de Hamsterkäfig

  Well, i found 1 way to fix the IE transparency problem when i use a semi-transparent image background.

  To fix that, i resigned the alpha 0>100 & 100>0 effect, but at least work wonderfull in ie6, ie7 and ie8.

  The way is:
  1. CSS
  a. set the background:
  ul.menu ul{ background: url(../imgs/semi-transp.png) left top repeat-y;}
  b. set the opacity:
  ul.menu ul{opacity:1}

  2. JavaScript:
  I just coment the changes of opacity:
  a. /*c.style.opacity=1;*/
  b. /*c.style.opacity=o; *//*c.style.filter='alpha(opacity='+(o*100)+')';*/

  The example: http://www.estudiorwd.com.ar/test/Verbano

  That is all. If know a better solution, pls post here

  It dont will work, sorry. I dont know if i made a mistake?? Let me check.

  Thank you

• http://www.dietmarhartje.de Webdesign

  thanx for this script but I don't know how to get it to work within wordpress 3 and the wp_nav_menu function. Does anyone knows a solution? Any help would be appreciated!

• Dibakar

  Thanx for your script. Now i want little bit more.Suppose i am in "A" page.Now in my menu i want to keep highlighted/seleted "A" link if i am in "A" page.Similar thing if i am in "B" page,then "B" link will remain highlighted.How to do it?

• Stephane

  It would be so nice not to have an absolute top position in the css. If we could have all the sub menus, including the first level one, positioned with something like a top:-1px we would be freed to use any content in the menus without having to adjust the css. This would make the menu fit for integration with my PHP home made CMS The idea here is to have the menus relative to each other, liquid, inflatable…

• Pingback: SPRY Menu with Sitemap Includes | Scraping a Sitemap & Styling a Menu and Footer Navigation | Jay Peretz | Santa Rosa Junior College

• Uyiyu

  uyiuy

• Olav B. Lygre

  A good menu which I use, but it does not work the latest FireFox beta( 4.0b11). The menus disappear when outside the main menu area.

• Sagarhandore007

  i like this menu…
  nice…

• Mahantesh

  menu is awesome but it is behaving differently in IE 5.5…
  the sub menu is constantly coming and disappearing…
  please help….

• Jimlinkous

  I tried this with Windows 7 and IE8 and it is really really slow. Anyone else have this issue. Works fine in FF and Chrome.

• Ahmed

  very good

• Guest

  IE 5.5 ? Seriously?

• HB

  Yes, I also face the same problem. My menu work OK with Firefox 3.x, but with Firefox 4.x, it disapear at the sub second level menu.

  Can anyone advice?

• chrisshizzle

  no, really… seriously? Windows ME called and was wondering why you didn't come to the 10 year reunion last year. You know, since you're so into the past.

• HB

  I found the problem, if you are using 32Bits of Win7, then everythings is fine. Trouble with 64Bit Win7.

• Pingback: Rozwijane menu (javascript) | radian

• http://www.facebook.com/profile.php?id=100002077520212 Vipul Agarwal

  A good menu which I use, but it does not work the latest FireFox beta( 4.0b11). The menus disappear when outside the main menu area.

• Raywood5

  Is there some kind of animation on the drop down "Navigation Item 1" etc? The text seems to get bolder or larger of some sort.

• http://twitter.com/ixycreativity Alexandra Muresan

  Guys, I see many of you are looking for a way to put more than 1 drop down menu on the site. Scroll down, load more comments, until you find George Donev's reply with his workaround on this. I've tried it and works fine!
  Just use the script from his reply, in the javascript. In the webpage add the class dropDownMenu to each menu, and remove the
  <script type="text/javascript">
  var menu=new menu.dd("menu");
  menu.init("menu","menuhover");
  </script>
  part, and you'll have many drop downs working on your page!

  I am happy with this script!

• Tom

  getElementsByClassName is not supported by IE for the George Donev's script, which would have been nice to know before taking the time to try it. Works great in FF.

• Anonymous

  Take a look at this: http://www.scriptiny.com/qa/1182/getelementsbyclass

• http://twitter.com/ixycreativity Alexandra Muresan

  Yes you're right. I managed to add multiple drop downs on a page by doing like I said few comments ago but instead of getElementsByClassName I used getElementsByTagName('ol'); in my case it was unlikely that ol will otherwise be used in the site.

• http://extravaganzakiev.blogspot.com/ Aleksandr

   good menu!!!

• http://www.mymoneycalculator.com.au/index.html My Money Calculator

  how to create from scratch using jQuery?

• Amit Bhagat

  Thanks a lot for this menu.

• A-team

  Awesome job man. Just perfect..

• Rishwin

  thanx a lot,could explain the process please

• Test

  menu js is conflict with my jquery? what solution of this

• Aasif khan

  hmmmmmmmm

• Aasif khan

  nice menu……..thangs 4 dissss……….!!!!!!!!!!!!!!!!

• Auguslee3000

  Excellent

• Auguslee3000

  Excellent

• Maksym Protsenko

  VERYY PRO, very simple to understud and very usefull!!
  excelent work master

• Guest

  Thanks.
  How can I open the menu from different pages without copy/past the code?Can I do it with php files as well ?
  I tried both Java lines on the top of the page and the menu did not display.

• Stinkyperson

  You kind of suck here. I went back two years and found no posts by George Donev. WTF, can't you just repost?

• Djawsniper

  how do I install a in wordpress.,?

• Joe Brennan

  Do you have a preferred manner of "Attribution"? As described in the creative commons license.

• Duncan Burke

  not working in IE 7 (not tested in other IE versions) sunshine.duncanburke.com

• Junn Ordinary Person

  nice. . .
  i'll try it. . .

  http://www.mainpedia.blogspot.com

• ARS

  Getting this error when i try to use 
  var menu = new menu.dd("menu");            menu.init("menu", "menuhover");

  Microsoft JScript runtime error: 'menu.dd' is null or not an object.
  Any help would great !

• Shari

  I am working on a website which was handled by a person in this position before me and created by an off site developer. I just work on updating and adding content. I added a link to a drop down var menu successfully and created a new page for this link by opening up another page associated with the drop down and then saved it with the name that I had created on the var menu.  I am now unsure about how to make this link work.

• http://www.qhoster.com Hosting

  Great menu I will use it for my site http://www.qhoster.com when start offering more products.

• Chewhg

  Simple & clean menu script. But I find it's a bit laggy running on IE. Anyway to solve this?

• Julian Day

  Awesome! Works great and using on SharePoint in a content editor block.

  One question, how do i center it on the screen or in the editor block? I tried <center></center> in a few spots but doesnt seem to center.

  Great Script!

• lakki

  Very good menu… it helped me a lot… thank you very much….

• Aa

  Thanks man

Supported By