Simple jQuery Dropdowns

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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)

 

View DemoDownload Files

 

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.