CSS 菜单与 JavaScript 菜单答案

【问题标题】：CSS menu vs JavaScript menuCSS 菜单与 JavaScript 菜单
【发布时间】：2011-10-05 00:42:45
【问题描述】：

在制作下拉菜单时，有像superfish这样的jQuery菜单和纯CSS菜单。 JS 菜单和 CSS 菜单有什么区别吗？

我不需要onclick 事件来覆盖默认锚点。我只需要能够单击菜单项然后按照<a href="...">...</a> 到另一个页面。

【问题讨论】：

【解决方案1】：

区别：

如果用户禁用了 JavaScript，则 JavaScript 会崩溃；如果用户禁用了 CSS（这种情况不太常见），CSS 菜单将不起作用
通过 jQuery 等库生成的 JavaScript 更适合跨浏览器，因为跨浏览器问题由库处理
JavaScript 菜单更加灵活，因为 CSS 在创建高度复杂的效果方面还不够成熟（不要忘记 JavaScript 是一种编程语言，而一种编程语言意味着你几乎可以做任何你想做的事情。但 CSS 是更像是声明式的）
CSS 菜单的大小通常更小（例如，请参阅 Thought Results），但这在当今用户的互联网速度下并不是什么大问题。
有时在菜单中，您需要分组，这无法通过 CSS 实现，但可以在 JavaScript 中完成。（分组意味着您希望在单击项目时打开下拉菜单，而不是跟随链接地址。当然，在您的情况下，这不是必需的）

【讨论】：

Re #2：大多数库都是多浏览器的，它们被设计为在少数现代浏览器的最新版本中工作（大多数列表 5）。仍然存在跨浏览器问题：jQuery 声称与 IE 6 兼容，StackOverflow 是使用 jQuery 编写的，但如果使用 IE 6 访问则会引发许多错误（并且几乎所有样式都被禁用）。
嗯，有办法在 CSS 中创建子菜单（#5），但方式很复杂。

【解决方案2】：

从哲学的角度来看，CSS 是关于样式的，而 JS 是关于交互的。然而，现在 WebKit 已经在 CSS 转换中全力以赴，这条线已经模糊了很多。

最后，尽可能多地使用 CSS 是非常棒的，然后添加 JavaScript 以提高交互级别。诸如键盘导航之类的东西...允许鼠标从一个链接移动到下一个链接的细微延迟...动画等。

【讨论】：

【解决方案3】：

即使我是一名开发人员，我也总是尽量避免编程。

我想我将使用一个 CSS 菜单，该菜单将使用 onHover 事件显示下拉菜单 DIV。

JavaScript 可能会受到其他应用程序的影响，可能是重复变量。并且可以轻松移植到通常不支持 JS 的移动设备上

【讨论】：

【解决方案4】：

一个明显的区别是 JS 菜单更加可定制。您无法仅使用 CSS 来控制菜单出现的速度之类的事情。

【讨论】：

你可以用CSS Transforms控制速度。
很好，感谢您的提示。一般来说，尽管您仍然比 CSS 拥有更多的灵活性。
@BrockAdams，指定您想到的动画属性会很有帮助。通常，CSS 菜单通过将display:none 更改为display:block 来显示，但是display 属性是不可动画的。（参见Animatable CSS properties，MDN。）我见过人们通过转换max-height 来对菜单进行CSS 动画处理，但我看到的每个示例都要求在CSS 中指定菜单的展开高度，这似乎非常严格如果菜单的内容可能会改变。