最好的 Javascript 下拉菜单？ [关闭]答案

【问题标题】：Best Javascript drop-down menu? [closed]最好的 Javascript 下拉菜单？ [关闭]
【发布时间】：2010-09-11 05:17:21
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript menu dhtml

【解决方案1】：

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

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

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

【讨论】：

这很好，但我厌恶网页上的下拉菜单无需我点击即可采取行动；当我没有采取任何公开行动时，它会导致事情看起来模糊不清。
这和超级鱼有什么关系？它不会那样做。
我发现这很漂亮并且易于配置。最好的部分是它可以在 IE6、IE7 和 Firefox 中运行（我还没有用其他人测试过）。
为什么所有 JavaScript 问题都会得到 JQuery 答案？
因为 JavaScript、HTML DOM 和 CSS 都是过时的“标准”，它们必须围绕整个语言构建一个包装器并显示实际可用的层次结构。只需使用 Flash/AS3。

【解决方案2】：

A List Apart - Dropdowns

我会使用像上面这样的纯 CSS 解决方案，因此即使禁用了 javascript，用户仍然可以获得下拉菜单。

【讨论】：

【解决方案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();

但我要指出，这些对可用性来说很糟糕。最好使用列表并一次向人们显示所有选项，并且最好不要在选择后导航和/或需要按下不同的按钮才能到达他们想要的位置。

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

【讨论】：

【解决方案4】：

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

稍加调整就可以使它们看起来和精美的菜单（jQuery 等）一样好

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

-- 安德鲁

【讨论】：

【解决方案5】：

我用这个：

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

有纵向和横向两种风格。

【讨论】：

【解决方案6】：

我喜欢火柴人的accordion，这取决于您希望它的表现如何。

【讨论】：

【解决方案7】：

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

您可能也可以从其他流行的 Javascript 框架（例如 jQuery）中获得类似的东西。

【讨论】：

这是一个使用 YUI 3 做下拉菜单的例子：jsbin.com/udigof/1