用于创建多级菜单的最快和最轻量级的菜单方法

Question

我想创建一个像this one这样的菜单，性能对我来说是非常重要的因素。到目前为止，我遇到了两种不同的方法，Javascript和CSS，我很难弄清楚我应该走哪条路。哪种方法更快、更轻量级？

我的网站可以使用Javascript，但我很好奇的一件事是，如果我选择CSS方法，我能以某种方式让它工作吗?如果用户禁用了Javascript，静态页面就会显示给他/她？

我将用一个例子来解释我的问题。假设我的菜单上有一个DOWNLOAD按钮。如果用户有JS，则下载内容应该在jQuery的帮助下出现在同一页面上，但如果用户禁用了JS，则单击菜单项应该会将用户带到download.php页面。

顺便说一句，如果有你建议的方法的免费解决方案，请提供一个链接。谢谢。

Answer 1

CSS菜单比JS菜单更难使用:如果鼠标关闭1px，即使是1ms长，子菜单也会立即隐藏。你可以在JS菜单上添加100或200ms的延迟，并允许访问者出现小的移动错误。并不是每个人都是具有完美鼠标技能的游戏玩家;)

所谓的“超级下拉”菜单可能比你提供的例子更好。在web上，先垂直再水平是很困难的(即使在桌面上，它也只用于软件中很少访问的功能。只有我们网页开发人员和网页设计师才能轻松地浏览这些复杂的菜单:) )；mega下拉菜单将以漂亮的标题向访问者显示整个链接。

如果你的网站在智能手机上很容易使用，你可能还想考虑在点击时(即用户点击主链接后)显示子菜单的菜单。

编辑:我应该在你没有询问的情况下添加这些链接，但是找不到第二个链接(现在它在我的书签中，谢谢：)

• 雅各布·尼尔森(可用性大师)关于下拉菜单:模式模式：Vertical Dropdown Menu

http://www.useit.com/alertbox/mega-dropdown-menus.html

Answer 2

您可以使用基于css的菜单开始显示，然后使用JS尽可能快地隐藏它。或者，您甚至可以将其替换为另一种依赖于JS的菜单样式。

CSS速度更快，重量更轻。JS更加灵活。混合动力是最重的重量。

Answer 3

了解progressive enhancement的一个很好的理由。同时使用CSS和JS！

你应该为那一小部分不使用javascript的人创建一个有效的基本CSS菜单，然后用JS构建它来得到你想要的东西。

它不仅对可访问性有好处，它还会创建更强大、更无bug的代码，因为你肯定会退回到某个功能正常的地方(大多数时候)