Simple jQuery Dropdowns

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:

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.

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?

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.

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.

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.

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’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 :)

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.

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?

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.