What's the best way to code a desktop application-like menu bar in Javascript?

Question

I'm looking to create a menu bar similar to those found in desktop applications using xhtml and javascript.

I don't mind using a framework like jQuery (in fact I'm already using jQuery for other behaviour in the app), but I'd like to avoid using a plugin or an external js solution (the idea is to keep it as light and as tightly-controlled as possible). Any suggestions?

Update: I want to avoid using heavy libraries like YUI, hopefully keeping it as light as possible and with as much control over the source as possible. I've played around with this before, but the biggest problem seems to be getting onclick (as opposed to hover) events to work as intended.

Answer 1

YUI Menu

Answer 2

ExtJS and YUI have the best menu widgets in my opinion. Both are easy to setup and use and are skinnable. ExtJS will integrate with JQuery.

The second idea is to use CSS to create your menus if you don't want to use a 3rd party library.A list apart has a great primer on creating CSS menus.

Answer 3

the problem with css menus is they aren't user friendly. If you run the menus, you'll notice that if you move off of the item, it immediately disappears. Also, the one they made seems to disappear even if you try to go to the second item on ie7!

maybe they didn't test it...

Answer 4

Checkout the Superfish plugin for jQuery ("Suckerfish on 'roids"): http://users.tpg.com.au/j_birch/plugins/superfish/

The suckerfish technique is basically a pure CSS implementation with a JavaScript "backup" for IE6, since IE6 doesn't support the :hover pseudo-class on li's or div's or anything that isn't an anchor <a/>. In addition it adds keyboard navigation which is great for accessibility and a bunch of other goodness like drop shadows, delays, etc. Check it out.

Answer 5

but the biggest problem seems to be getting onclick (as opposed to hover) events to work as intended.

So maybe you should explain what problems you are having with the onclick events in your menu. In my experience, the hardest part is getting the styles right in all browsers. handling the events is a piece of cake.