Question

我正在寻找一个下拉式JavaScript菜单。

它应该是最简单，最优雅的可访问菜单，也适用于IE6和Firefox 2。如果它在未编号的列表（ul）上工作就可以了，这样用户就可以在没有JavaScript支持的情况下使用该页面。

您推荐哪一个？我在哪里可以找到这样一个菜单的代码？

Answer 1

我认为jquery superfish菜单很棒且易于使用：

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

Javascript 不需要，它基于简单有效的ul unorder列表。

Answer 2

A List Apart - Dropdowns

我会使用类似上面的css解决方案，因此即使禁用了javascript，用户仍会获得下拉菜单。

Answer 3

这是我使用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;
};

然后在你的onready处理程序中：


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

但我要指出，这些可用性很糟糕。最好使用列表并一次向所有人显示所有选项，最好不要在选择之后导航和/或要求推送不同的按钮以达到他们想要的位置。

我认为你最好不要使用上面的（我写了代码！）

Answer 4

纯粹主义者： http://www.grc.com/menudemo.htm 绝对没有JavaScript，只有pure-css - 几乎适用于所有浏览器。

稍微调整可以使它们看起来像花哨的菜单（jQuery等）

但是我们也使用了jQuery，YUI！和别的。 YUI！内置了很好的可访问性选项，如果这是JavaScript驱动菜单的要求。

- 安德鲁

Answer 5

我用这个：

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

有垂直和水平两种口味。

Answer 6

我喜欢火柴人的accordion，这取决于你希望它的表现方式可以产生很好的效果。

Answer 7

我一直是雅虎（毫不掩饰）的粉丝！用户界面库。 They have a nice menubar system这很容易实现。很棒的跨浏览器支持。

你可以从其他流行的Javascript框架中获得类似的东西，比如jQuery。

最好的Javascript下拉菜单？

7 个答案: