javascript - 有没有比纯 CSS 2 更好的、符合标准的方法来为网站制作下拉导航？

Question

我们都见过无数的 CSS 2 下拉菜单，它们曾经是为网站制作下拉菜单的最佳方式。但是，我想知道:

有了所有这些新技术，有没有比 CSS 2 更好的制作下拉菜单的方法:基于悬停的隐藏 div 菜单？

我仍然使用旧的 CSS 2 悬停菜单的原因是因为我还没有找到其他东西可以跨浏览器兼容、简单、符合标准并且可以被尽可能多的最终用户正确查看。

底线是，我想在网站开发的各个方面尽可能向前推进，但这是一个我不确定向前推进是否安全的领域。

是时候放弃“网站根本不应该依赖 javascript”标准并开始使用 jQuery 下拉菜单了吗？

Answer 1

Web 开发领域当前的想法是，您应该采用渐进增强的方法来构建您的网站。这是一种自下而上的分层方法:基本内容(语义 HTML)构成基础，外观 (CSS) 位于顶部，最后是功能位于它们之上(由 JavaScript 提供)。

您所说的方法是上述的前两层(HTML 和 CSS)。除此之外，您始终可以使用 jQuery 来为菜单提供功能或额外的精美触摸，前提是您以不显眼的方式执行此操作(即，使用 jquery 选择器以编程方式连接事件)。例如，您可以使用 jQuery 使菜单在悬停时淡入淡出。

现在重要的一点是要意识到您不必放弃 CSS 来做这种事情——这不是一个非此即彼的问题。通过像这样分层并不引人注意地使用 JavaScript，您将获得一个适合所有访问者的网站!那些没有 JavaScript 和没有 CSS 的人将获得基本内容，并且他们可以浏览您的站点(尽管它看起来不漂亮!)。那些没有 javascript 但有 CSS 的菜单仍然是一个基本菜单，悬停时有下拉菜单，仅使用 CSS 设置样式。那些使用 JavaScript 和使用 CSS 的人将获得网站的最佳表现形式，其中 CSS 提供外观和感觉，而 JavaScript 提供附加功能/效果。

您应该从中得到的是，网站不需要在每个浏览器中看起来都一样。对于无能力的浏览器，确保内容可以以其基本形式不受阻碍地呈现。对于功能更强大的浏览器，添加额外的样式和功能层以利用其更高级的功能。基本上，每个人都可以按预期访问您的内容，您仍然可以进一步插入您的 Web 开发 :)

这篇文章比我以往任何时候都更好地阐明了这个概念:http://www.alistapart.com/articles/understandingprogressiveenhancement