CSS 下拉菜单 - “最佳”？功能最丰富？答案

【问题标题】：CSS Drop-Down Menus - "Best"? Most feature-rich?CSS 下拉菜单 - “最佳”？功能最丰富？
【发布时间】：2010-09-06 03:54:39
【问题描述】：

不幸的是，我不得不在我正在构建的网站上实现下拉级联菜单。我正在寻找一种 Suckerfish 风格的解决方案，它主要基于 CSS，并且适用于一组简单的嵌套 UL 和 LI。

Son of Suckerfish 似乎是要走的路，但我不喜欢它在你移开鼠标的那一刻就消失的方式，因为有协调困难的用户在浏览网站时会做噩梦（或者只是没有麻烦，但由于它是一个公司网站，因此可能会有一些人必须使用我实施的任何东西）。

欢迎我什至没有想过需要的简洁功能，但我正在寻找的两个主要元素是：

【问题讨论】：

【解决方案1】：

我强烈建议您使用superfish，这是对吸盘鱼菜单的 jQuery 改编。它有很多功能（延迟就是其中之一），添加了一些精美的动画功能，并优雅地降级为普通的吸盘鱼菜单。它也不需要任何额外的标记。

【讨论】：

【解决方案2】：

你可以使用 jQuery。这是一个例子：http://www.jqueryplugins.com/plugin/47/

【讨论】：

【解决方案3】：

您将无法获得具有所需功能的纯 CSS 下拉菜单。您必须使用某种 Javascript。要么是已经提到的 JQuery 之类的库，要么是通过修改 Suckerfish 代码以使用 onclick 而不是 onmouseover/out。

但是，如果采用全 Javascript 的路线，您可能会让一组人（“有协调困难的用户”）更容易，但让其他人（由于某种原因关闭 Javascript 的任何人）变得困难。

您可能想要考虑添加一些替代方案 - 鼠标控制的悬停菜单，适合使用鼠标的用户；通过访问键等进行基于键盘的控制。

【讨论】：

【解决方案4】：

我正在使用 Steve Gibson 的网站 grc.com 上实施的解决方案。它可以满足我的一切需求，并且使用 no javascript。但是，您正在寻找的延迟不存在，因此您可能需要为此添加一些 Javascript。

【讨论】：

【解决方案5】：

部分协调问题可能源于糟糕的设计。确保你有相当大的按钮，如果可能的话，在所有方面都重叠。理想情况下，顶部导航按钮会在其下方居中显示一个下拉菜单（而不是左对齐）。下拉菜单的子菜单将遵循类似的模式。我发现这种级别的错误填充可以适应不协调的用户，并为您省去使用 javascript 编程的麻烦。

当然，每个网站都是不同的，所以我将其更多地作为一种替代的“假设”解决方案。

【讨论】：

【解决方案6】：

对于现在来到这个旧线程的任何人，我建议查看引导下拉菜单的各种修改。例如：

祝你好运

【讨论】：

【解决方案7】：

我看不到在 JavaScript 之外添加延迟的方法 - 但如果您要使用 JavaScript，您不妨使用 JavaScript 控制的菜单。

如果您遵循语义正确的导航模式并将其设置为在不存在 JavaScript 时正常显示（例如静态），您应该可以使用任何内容。

这完全取决于您的目标受众 - 谁更大？ JS禁用或协调困难的用户？我猜后者需要优先考虑（如果不是为了百分比使用，那么残疾法）。

【讨论】：

【解决方案8】：

正如 Lee Theobald 所说，下拉/下拉需要 Javascript，而 Jquery 是一个不错的选择。但在可访问性方面，请查看“Listamatic”一个很棒的菜单列表和特殊的this nested。

【讨论】：

【解决方案9】：

我的第一个建议呼应了一个已经提出的建议 - Steve Gibson's CSS Menu。它不使用 JavaScript，几乎与您将要获得的跨平台兼容，并且实现起来相对简单。

如果这不起作用，我的基于 JS 的推荐会转到 mygosuMenu。在找到史蒂夫的菜单之前，我已经在我所有的项目中使用它很长一段时间了。其高度可配置；而且样式、结构和菜单代码都是分开的。它是一个基本的 HTML 表格，您可以通过 CSS 为您的内容设置样式。

我还有两个网站使用后者：

【讨论】：