最佳Javascript下拉菜单?

时间:2020-03-06 14:25:46  来源:igfitidea点击:

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

它应该是在IE6和Firefox 2中也可以使用的最简单,最优雅的可访问菜单。
如果它可以处理未编号的列表(ul),那将是很好的,因此用户可以在没有JavaScript支持的情况下使用页面。

我们推荐哪一种,在哪里可以找到该菜单的代码?

解决方案

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

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

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

下拉列表

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

我喜欢Stickman的手风琴,这取决于我们希望它的表现如何,可以达到很好的效果。

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

然后在我们准备就绪的处理程序中:

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

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

我认为最好不要使用上面的代码(我写了代码!)

对于纯粹主义者:
http://www.grc.com/menudemo.htm
绝对没有JavaScript,仅是纯CSS,几乎可以与所有浏览器一起使用。

稍作调整就可以使它们看起来像精美的菜单(jQuery等)一样

但是我们也使用了jQuery,YUI!和别的。 UI!如果JavaScript驱动的菜单是必需的,则内置了出色的辅助功能选项。

--
安德鲁

我用这个:

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

有垂直和水平两种口味。

我一直是Yahoo的狂热粉丝!用户界面库。他们有一个很好的菜单栏系统,易于实现。强大的跨浏览器支持。

我们可能也可以从其他流行的Javascript框架(例如jQuery)中获得类似的东西。