CSS 下拉菜单 - “最佳”？ 功能最丰富？
我处于不幸的境地，必须在我正在构建的网站上实现下拉级联菜单。 我正在寻找一个 Suckerfish 风格的解决方案，该解决方案主要基于 CSS，并且适用于一组简单的嵌套 UL 和 LI。
Son of Suckerfish 似乎是可行的方法，但我不喜欢这种方式当您将鼠标移开时，它就会消失，因为协调困难的用户在浏览该网站时会遇到一场噩梦（或者只是不打扰，但由于它是一个公司网站，因此有些人可能不得不使用我实现的任何内容）。
我什至没有考虑过需要的简洁功能是受欢迎的，但我正在寻找的两个主要元素是：
- 使用嵌套 UL/LI 结构的多级
- 当菜单为“时，消失之前的小延迟（可能是可配置的？）” mouseout"-ed，即使它是由一些额外的 JavaScript 提供的。
I'm in the unfortunate position of having to implement a drop-down cascading menu on a site I'm building. I'm looking for a Suckerfish-style solution that is primarily CSS-based and works on a simple set of nested ULs and LIs.
Son of Suckerfish seems like the way to go, but I don't like the way it just disappears the second you move the mouse away, as users with co-ordination difficulties will have a nightmare navigating the site (or just not bother, but since it's a corporate site there are some who will probably have to use whatever I implement).
Neat features that I've not even thought about needing are welcome, but the two main elements I'm looking for are:
- Multi-level using a nested UL/LI structure
- Small (possibly configurable?) delay before disappearing when the menu is "mouseout"-ed, even if it is provided by some extra JavaScript.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
对于现在来到这个旧线程的任何人，我建议查看引导下拉菜单的各种修改。 例如：
http://bootsnipp.com/snippets/featured/ multi-level-dropdown-menu-bs3
祝你好运
For anyone coming to this old thread now I would suggest looking in to various modifications of the bootstrap drop-down menu. For example this:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Good luck
正如 Lee Theobald 所说，下拉/下拉需要 Javascript，而 Jquery 是一个不错的选择。 但在可访问性方面，请看一下“Listamatic”菜单列表和特殊此嵌套。
As Lee Theobald said, drop/down need Javascript, and Jquery is a great choice. But in the side of accesibility, take a look at "Listamatic" a great list of menus and special this nested.
我的第一个推荐与已经提出的一个相呼应 - Steve Gibson 的 CSS 菜单。 它不使用 JavaScript，与您将获得的跨平台兼容，并且实现起来相对简单。
如果这不起作用，我的基于 JS 的推荐将转到 mygosuMenu。 在找到史蒂夫的菜单之前，我已经在我的所有项目中使用它相当一段时间了。 其高度可配置； 样式、结构和菜单代码都是独立的。 它是一个基本的 HTML 表格，您可以根据自己的喜好通过 CSS 进行样式设置。
我仍然有两个网站使用后者：
My first recomendation echos one already made - Steve Gibson's CSS Menu. It uses no JavaScript, is about as cross-platform compliant as you're going to get, and is relatively simple to implement.
If that doesn't work, my JS-based reccomendation goes to mygosuMenu. I've been using it for quite some time on all my projects prior to finding Steve's menu. Its highly configurable; and style, structure, and the menu code are all seperate. Its a basic HTML Table you can style via CSS to your heart's content.
I've still got two sites using the latter:
我看不出在 JavaScript 之外添加延迟的方法 - 但如果您要使用 JavaScript，您也可以使用 JavaScript 控制的菜单。
如果您遵循语义上正确的导航模式并将其设置为在 JavaScript 不存在时正常显示（例如静态），那么您应该可以使用任何内容。
这完全取决于你的目标受众——谁的规模更大？ JS 障碍或协调困难的用户？ 我猜想后者需要优先权（如果不是百分比使用，那么残疾法）。
I can't see a way to add delay outside of JavaScript - but if you're going to use JavaScript you may as well use a JavaScript controlled menu.
If you follow a semantically-correct nav pattern and set it up so it display's normally (e.g. static) when JavaScript is not present you should be fine with whatever you use.
It's all about your target audience - who's larger? JS-disabled or users with co-ordination difficulties? I would guess that the latter require the priority (if not for percentage use then disability laws).
部分协调问题可能源于糟糕的设计。 确保您有相当大的按钮，如果可能的话，所有边都重叠。 理想情况下，顶部导航按钮将有一个下拉菜单出现在其下方居中（而不是左对齐）。 下拉菜单的子菜单将遵循类似的模式。 我发现这种级别的错误填充可以适应不协调的用户，并省去您在 JavaScript 中编程的麻烦。
当然，每个站点都是不同的，因此我将其更多地作为替代的“假设”解决方案来呈现。
Part of the coordination problem can stem from bad design. Make sure you have fairly large buttons with, if possible, overlap on all sides. Ideally a top nav button would have a drop down menu appearing centered below it (instead of left aligned). Sub-menus of the drop-down would follow a similar pattern. I've found having this level of error padding accommodates uncoordinated users, and saves you the trouble of programming in javascript.
Every site is different of course, so I present this more as an alternative 'what-if' solution.
我正在使用 Steve Gibson 网站 grc.com 上实施的解决方案。 它可以完成我需要的一切，并且不使用 JavaScript。 然而，您正在寻找的延迟并不存在，因此您可能需要为此添加一些 Javascript。
I am using the solution implemented on Steve Gibson's site grc.com. It does everything I need, and uses no javascript. The delay thing you are looking for isn't there however, so you will probably need to add some Javascript for that.
你可以使用 jQuery。 这是一个示例： http://www.jqueryplugins.com/plugin/47/
You could use jQuery. Here is an example: http://www.jqueryplugins.com/plugin/47/
您将无法获得具有所需功能的纯 CSS 下拉菜单。 您必须使用某种 Javascript。 要么使用前面提到的 JQuery 之类的库，要么修改 Suckerfish 代码以使用 onclick 而不是 onmouseover/out。
但是，通过采用全 Javascript 路线，您可能会让一组人（“有协调困难的用户”）变得更容易，但对其他人（任何因某种原因关闭 Javascript 的人）来说会变得困难。
您可能想考虑添加一些替代方案 - 鼠标控制的悬停菜单适合那些习惯使用鼠标的人； 通过访问键等进行基于键盘的控制。
You won't be able to get a pure CSS drop down menu with the functionality you require. You'll have to use some kind of Javascript. Either a library like JQuery that has been mentioned or by modifying the Suckerfish code to use onclick instead of onmouseover/out.
But by going an all Javascript route you could be making it easier for one group of people ("users with co-ordination difficulties") but making it difficult for others (anyone with Javascript turned off for some reason).
You may want to look into adding some alternatives - mouse controlled hover menu for those comfortable with the mouse; keyboard based control via access keys and the like for others.
我强烈建议您使用superfish， suckerfish 菜单的 jQuery 改编。 它具有大量功能（延迟就是其中之一），添加了一些奇特的动画功能，并优雅地降级为正常的 suckerfish 菜单。 它也不需要任何额外的标记。
I would strongly suggest that you use superfish, the jQuery adaptation of the suckerfish menu. It has loads of features (and delay is one of them), adds some fancy animation capabilities, and degrades to the normal suckerfish menu gracefully. It also doesn't need any extra markup.