There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features:
- Cross-browser compatible (even IE 6)
- Multi-level and retains “trail”
- Very minimal styling (easy to adapt)
- Very minimal JavaScript (short bit of jQuery)
I think it worked out pretty well. All my testing shows them working pretty well. Please let me know if you find any problems and we can try to address them. There was only really one CSS tweak needed for IE, which was to use inline-block on the submenu list items to prevent the weird spacing pseduo-line-break IE likes to do.
Each “level” is clearly marked in the CSS file, so it should be pretty easy to identify what is what and apply your own custom styling.
hoverIntent
The demo and download comes with two “versions”, one with hoverIntent and one without. I couldn’t decide which one I liked better so I just left both in. On one hand, hoverIntent is nice because it prevents the menus from opening if you just quickly mouse over them (like the mouse just happened to cross them but you clearly weren’t intending to use the menu at that time). On the other hand, it makes the menu feel a bit sluggish.
Very cool Chris.
With this type of jQuery menus, do we have to worry if the user has javascript turned off? If they do, then what?
Works great Chris – thanks for the info!
I think I am going to vote for the one without hoverIntent. The sluggish feel just detracts from the menu, IMHO. I guess it depends on users mouse moving speeds though! Thanks, I will probably be using this in the future
Nice work, i know this is a “simple” dropdown menu, but my only point to consider is:
Some menu items go 3 levels deep e.g.: “Game-practice Equiptment >> Soccer >> Soccer Goals”. This is conveniently in the middle of the screen. However – if the the LAST <li> item (books-videos) goes 3 levels deep the menu expand left off the screen and causes horizontal scrolling :( (yes even at 1024×768)
Im not sure how you difficult it would be to make the dropdowns expand out to the left (instead of the right) if them menu will go cuase horizontal scrolling?
Wouldn’t left expanding menus be the opposite of what the user would expect when using them? I know it would bother me because it would feel like reading right to left (or the opposite for languages that do read right to left ;-) ).
Couldn’t you just leave that last section of the menu non-nested or better yet, not have the main menu go over that far to the right? I noticed this functionality as well when changing the browser window size on my Mac while testing this code…but everything has limitations.
Cool menu Chris! Have you written any WordPress plug-ins that use jQuery yet?
Thanks!
Just what I needed, but if you had published before would I’ve saved many hours xD
Thank you, thank you, thank you! This is great! The code is so much simpler than many of the others out there.
Superfish rocks!
Good work.
I was looking for such solution a month ago and its crazy but true that you can’t find a simple dropdown indeed.
Excellent work! thanks for sharing.
Nice work, beautifully crafted : )
I think Suckerfish is the leading standard concerning dropdown UL menu’s. But you just perfected it bij adding childs of childs.
(is it childs or children in css? :p )
I got a horizontal scroll bar in IE6
Chris, this like everything else I have seen from you is excellent. Also want to say thank you for the Podcasts, superb content to learn from.
Wow 65kb of unnecessary JavaScript when this can easily be accomplished with css http://www.cssplay.co.uk/menus/dd_valid.html
You claim to be CSS only yet it appears you have to use XHTML. What is the logical difference between using XHTML or jQuery to support CSS? This menu is elegant in its simplicity. But the author here has manners and does not ‘mark’ on your web sight.
You have got to be kidding me right? How else would you propose you do a website, or drop down menu, without xhtml? Saying something is using css only doesn’t literally mean it is just css, xhtml is the base structure of any website. The fact that you don’t see the benefit of using a pure css solution over the inclusion of 65kb of bloated javascript scares me and makes me think you have no idea what you are talking about.
Chris, You are the best!
I like it, nice job, but personally I am getting tired of drop-down menus. I prefer a nice big footer holding all this “extra” content. There are NO browser/accessibility issues and it looks more modern. Do you (or anyone) agree?
I’ve been working on something very similar, but noticed that there are some issues with jQuery hover() and Firefox (both 2 and 3) where if you hover over the menu and it covers text fields or text areas, and then exit the menu on one of these elements, the menu doesn’t go away. It sticks around.
Little video: http://screencast.com/t/TH2D2cdx81
Ticket for jQuery: http://dev.jquery.com/ticket/3730
I found that to get around it, I basically wrote extra css to use the :hover psuedo class for these objects and then had to update my js to do some browser sniffing. I don’t like that option, but we use a lot of form elements and it’s really annoying when the menus don’t go away!
I see the same issue with your code when I download it and add some text fields below it.
drop down menus are ok on some sites but i dont think they suit all…
very nice, thank you !!
Great post, Chris, thank you. Your tutorials are invaluable for those of us who are still learning.
It can be done with pure CSS.
I always hate drop down menu on website, but nice tutorial thx :)
A new surprise every day…
Thanks Chris…
Too bad it lacks some basic accessibility (like using tab key to navigate in sub menus), but it’s a great menu, easy to setup for any website.
Hi Chris,
Cannot say I agree with the article presented.
This is CSS-Tricks not jQuery overrides.
Let’s face it there are better CSS only drop-down methods, albeit less simple and JavaScript is required to get IEv6 to fully comply.
From an accessibility perspective the article should add a proviso that all root navigation links reference a page where the extended (dropdown) links are listed in full without a JavaScript requirement.
I’ll forgive you if you provide the CSS only version too.
I’m glad you wrote a post like this..there’s a lot of dropdown samples out there but not all of them are good. Eventhough this one has some issues I think with the bug fixing it will be perfect soon.I’m gonna test it right now :)
For the extra line breaks in IE6, this can be fixed by removing whitespace in your markup.
For example,
<li></li>
<li></li>
can be written as
<li></li
><li></li
>
and it will remove the line break. It looks funny, but it’s valid and works.
Really useful, thanks very much!
jQuery helps a lot when you have to do some amazing stuffs with our sites…
hey!
I have a problem with my ul menu level2 appearing UNDER MY content.
a screenshot: http://i43.tinypic.com/23sg4zk.gif
how do i solve that?
I am having the same problem as well.
http://i40.tinypic.com/2epu0wn.gif
Chris Dornfeld writes in:
The solution is to add this CSS rule:
Without the z-index, any other layers on the page that use positioning
will appear on top of the menus.
This menu it’s fantastic
I’m experiencing some weirdness, perhaps someone has an answer to. Using this menu, the sub-menu appears over a flash .swf. It’s not a problem with transparency, as I’ve already set the wmode to transparent. But when viewing the menu on a mac (only) in Safari v.3 and 4, and FF v.4 the menu acts very strange, with parts disappearing on rollover and such. No problems with browsers on a PC.
Here’s the link, any ideas?
http://geigercomputers.com/pm/projects/pbgroup/wood-pivot-window.html
that’s very elegant solution yet simplify the CSS. Well done and thank you Chris.
Thanks for the nice menu’s! I use jQuery in all my projects, so this source is really nice to know! Thanks!
I’m stuck at the library…viewing your new design in ie6 and it still looks great…nice work.
hi chris thank for your aticle. I need your help. I would like use my sub menu width background at 100%; but i’dont want overflow page-wrap:800px;
http://www.surplus-inventaire.com/mel/SimplejQueryDropdowns/index-hoverIntent.html
I need my sub menu 100% but inside width in border blue.
sorry form my english
Hi!
This is absolutely great, and it will work well on a new website that I am designing.
However, I do have a problem that is REALLY frustrating me!
Can you tell me how to put the dropdown menu into a table, and how to get it to center in the page? Everytime I put it underneath an image that is in a table, and that is centered, the dropdown menu moves all the page to left. I am presuming it is something in the CSS that I need to change…but what?
Any help would be grateful.
Thank you!
Cool job on making this. Too bad you didn’t bother to include a readme or properly comment your code out.
Its really a great work.I’m using it in my application.The only problem I faced was,if I keep the position:relative according to my convenience,then dropdown items hide behind data section & sidebar.And if I keep its position:absolute then I face placing problem(menu) as all my other elements are relative.
Is there any solution for this?do let me know!
Thank you for your help.
It appears your demo works with javascript disabled but when I’m using it on a local test site and disable javascript, it doesn’t work. What could I be doing wrong?