Best Javascript drop-down menu?

Question

I am looking for a drop-down JavaScript menu.

It should be the simplest and most elegant accessible menu that works in IE6 and Firefox 2 also. It would be fine if it worked on an unnumbered list (ul) so the user can use the page without JavaScript support.

Which one do you recommend and where can I find the code to such a menu?

Answer 1

I think the jquery superfish menu is fantastic and easy to use:

http://users.tpg.com.au/j_birch/plugins/superfish/

Javascript is not required, and it is based on simple valid ul unorder lists.

Answer 2

http://www.alistapart.com/articles/dropdowns">A List Apart - Dropdowns

I'd use a css-only solution like the above so the user still gets dropdown menus even with javascript disabled.

Answer 3

I like stickman's accordion, which depending on how you want it to behave can be a nice effect.

Answer 4

Here's my answer using jQuery:

jQuery.fn.ddnav = function() {
        this.wrap("");
        this.each(function() {
                var sel = document.createElement('select');
                jQuery(this).find("li.label, li a").each(function() {
                        jQuery("<option>").val(this.href ? this.href : '').html(jQuery(this).html()).appendTo(sel);
                });
                jQuery(this).hide().after(sel);
        });
        this.parent().find("select").after("<input type=\"button\" value=\"Go\">");
        var callback = function(button) {
                var url = jQuery(button.target).parent("div").find("select").val();
                if(url.length)
                        window.open(url, "_self")
        };
        this.parent().find("input[type='button']").click(callback);
        this.parent().find("select").change(callback);
        return this;
};

And then in your onready handler:

  $("ul.dropdown_nav").ddnav();

But I would point out that these are terrible for usability. Better to use a list and show people all of the options at once, and it's better to not navigate away after a selection and/or require a different button to be pushed to get to where they want.

I think you're best off never using the above (and I wrote the code!)

Answer 5

For the purist: http://www.grc.com/menudemo.htm Absolutely no JavaScript, pure-css only - and works with virtually all browsers.

A little tweaking can make them look as good as the fancy menus (jQuery, etc.)

But we have also used jQuery, YUI! and others. YUI! has great accessibility options built in, if that's a requirement for JavaScript-powered menus.

-- Andrew

Answer 6

I use this one:

http://www.tanfa.co.uk/css/examples/menu/vs7.asp

Comes in both vertical and horizontal flavours.

Answer 7

I've been an (unabashed) fan of the Yahoo! User Interface Library. They have a nice menubar system that's easy to implement. Great cross-browser support.

You can probably get something similar from the other popular Javascript frameworks, such as jQuery, as well.