Skip to content Skip to sidebar Skip to footer

Best Javascript Drop-down Menu?

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 u

Solution 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.

Solution 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.

Solution 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);
        returnthis;
};

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

Solution 4:

I use this one:

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

Comes in both vertical and horizontal flavours.

Solution 5:

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

Post a Comment for "Best Javascript Drop-down Menu?"