CSS下拉菜单-"最佳"?功能最丰富?

时间:2020-03-05 18:40:40  来源:igfitidea点击:

不幸的是,我必须在要构建的网站上实施下拉级联菜单。我正在寻找一种Suckerfish风格的解决方案,该解决方案主要基于CSS,并且可以在一组简单的嵌套UL和LI上使用。

Suckerfish的儿子似乎是要走的路,但是我不喜欢它在鼠标移开后消失的方式,因为协调困难的用户在浏览网站时会遇到噩梦(或者只是打扰而已,但是由于它是公司网站,因此有些人可能必须使用我实施的任何工具)。

我什至没有考虑过需要的整洁功能是值得欢迎的,但是我正在寻找的两个主要元素是:

  • 使用嵌套的UL / LI结构进行多级
  • 即使菜单由" mouseout"编辑,即使它由某些额外的JavaScript提供,在消失之前也有很小的延迟(可能是可配置的?)。

解决方案

回答

我们可以使用jQuery。这是一个示例:http://www.jqueryplugins.com/plugin/47/

回答

我们将无法获得具有所需功能的纯CSS下拉菜单。我们将必须使用某种Javascript。或者提到了像JQuery这样的库,或者通过修改Suckerfish代码以使用onclick而不是onmouseover / out。

但是,通过采用全部Java脚本路线,我们可以使一组人("有协调困难的用户")更容易,但对其他人却变得困难(由于某种原因而关闭了Java的人)。

我们可能需要考虑为那些对鼠标感到满意的人添加一些鼠标控制的悬停菜单。基于键盘的键盘,通过其他人的访问键等进行控制。

回答

我看不到在JavaScript之外增加延迟的方法,但是如果我们要使用JavaScript,则最好使用JavaScript控制的菜单。

如果我们遵循语义正确的导航模式并将其设置为在没有JavaScript的情况下显示为正常(例如静态),则我们可以使用任何内容。

更大的目标受众是谁?禁用JS或者有协调困难的用户?我猜想后者需要优先考虑(如果不按百分比使用,则要制定残疾法)。

回答

我正在使用在史蒂夫·吉布森(Steve Gibson)的网站grc.com上实施的解决方案。它可以满足我的所有需求,并且不使用JavaScript。但是,我们没有找到延迟的东西,因此我们可能需要为此添加一些Javascript。

回答

就像Lee Theobald所说的那样,下拉列表需要Javascript,而Jquery是一个不错的选择。但是从可访问性的角度来看,请看一下" Listamatic",其中有很多菜单,还有一些特殊的嵌套菜单。

回答

我强烈建议我们使用超级鱼,即傻瓜菜单的jQuery改编版。它具有很多功能(延迟是其中之一),添加了一些精美的动画功能,并优雅地降级到普通的无名小卒菜单。它还不需要任何额外的标记。

回答

协调问题的一部分可能源于不良的设计。确保我们有相当大的按钮,如果可能的话,所有按钮都应重叠。理想情况下,顶部导航按钮将在其下方居中显示下拉菜单(而不是左对齐)。下拉菜单的子菜单将遵循类似的模式。我发现具有这种级别的错误填充可容纳不协调的用户,并为我们节省了使用JavaScript编程的麻烦。

当然,每个站点都不同,因此,我将其作为替代的"假设分析"解决方案进行介绍。

回答

我的第一个建议是回应史蒂夫·吉布森(Steve Gibson)的CSS菜单。它不使用JavaScript,几乎与我们将要跨平台兼容,并且实现起来相对简单。

如果这不起作用,我的基于JS的建议将转到mygosuMenu。在找到史蒂夫的菜单之前,我已经在所有项目中使用了一段时间。其高度可配置;和样式,结构以及菜单代码都是分开的。它是一个基本的HTML表格,我们可以通过CSS设置样式以适合心脏内容。

我仍然有两个站点使用后者:

  • 基督教摇滚乐团耶稣约书亚记24:15(交通顺畅,伙计们仍在共享主机上...)
  • 东区消防局