Best Javascript drop-down menu? [closed]

问题:

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 7 years ago.

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?

回答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.

回答2:

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.

回答3:

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!)

回答4:

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

回答5:

I use this one:

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

Comes in both vertical and horizontal flavours.

回答6:

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

回答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.