如何在纯 CSS 中创建“粘性”下拉菜单？答案

【问题标题】：How do I create a "sticky" dropdown menu in pure CSS?如何在纯 CSS 中创建“粘性”下拉菜单？
【发布时间】：2013-02-10 06:35:18
【问题描述】：

我想要达到的效果：

在 Twitter 的新设计中，他们为帐户设置区域实施了一个“粘性”下拉菜单。

基本上，当您在顶部的黑色全局导航栏中单击您的用户名时，一个菜单会打开并保持打开状态，直到您再次单击其中一个链接或您的用户名名称以将其关闭。

我想用 CSS 和 HTML 来实现与粘性菜单完全相同的效果。使用 CSS3 功能我没问题，但如果不依赖 CSS3 也能做到这一点，那就更好了。

到目前为止我所做的尝试

我可以使用纯 CSS 和 HTML 的下拉菜单创建基本导航菜单，但只能使用 :hover 伪类。我尝试了 :active 伪类，但不幸的是它不会“粘”并保持打开状态。

这种“粘性”下拉效果是否可能在不依赖 javascript 的情况下实现？如果不依赖 javascript 是不可能的，我应该如何处理它才能优雅地降级？

【问题讨论】：

jsfiddle (jsfiddle.net) 请或一些代码...
jsfiddle，嗯？你想让我发布一些代码吗？鉴于这个问题，我认为没有必要发布任何代码。
@AndrewDeAndrade 在 code 中，他的意思是到目前为止您已经尝试过的 html/css。

标签： javascript html css drop-down-menu

【解决方案1】：

我要忘记这里了，因为我无法在工作中访问 Twitter。如果我没记错的话，在主页上使用相同的脚本登录。它会创建一个小弹出式窗口，即使在移动鼠标后也会保持在那里。

如果这就是您所说的，那么仅使用 CSS 是无法实现的；它是一种样式语言，而不是脚本语言。 :hover/:active 伪类样式将在该事件停止后立即取消应用。

涉及 Javascript 的替代方法是使按钮成为一个链接，将您引导至实际页面。然后绑定它的onclick 以弹出一个绝对定位的div，默认情况下是隐藏的（return false 在 onclick 中以防止跟随链接）。这个div 直到你想要隐藏它的任何条件才会隐藏，并且它开始隐藏，所以如果他们没有 Javascript，他们将不知道他们缺少什么。

【讨论】：

这正是我想要的效果。我认为只有启用 javascript 才有可能。事实上，整个网站都在使用这种效果，我认为它极大地提高了 twitter 对大多数人的可用性。我认为它甚至没有必要指向一个实际的页面。我认为它可以是指向“#”的 href 和寻找 onclick 事件的 javascript。如果它不活动，它会激活，如果它不活动，它会卸载。不幸的是，这个解决方案并没有优雅地降级，因为它无法将它们带入带有“#”href 的帐户设置。
这就是为什么href 是一个有效的链接，而不仅仅是#，所以如果javascript 被禁用它不会返回false，它们会被带到页面。
但是我还能保持点击打开和点击关闭的效果吗？如果我将该链接指向一个真实页面，那么即使使用 javascript 的用户也不会被带到该页面而不是看到下拉菜单吗？我是否可以这样做，以便只有禁用 Javascript 的用户不会被带到另一个页面，而启用 javascript 的用户会留在当前页面并查看下拉菜单？
是的，这就是 return false 在 onclick 函数中的用途。它将阻止默认操作（转到页面）。如果 Javascript 被禁用，它不会return false，它们会被带到页面。
太棒了。谢谢。我现在正在完成菜单上的一些其他 CSS 细节。我可能会在明天尝试您的建议，然后再报告。

【解决方案2】：

使用pseudo 类:focus 而不是:active。您可能还需要在 HTML 中使用 tabindex="" 以使元素接受焦点。

但是，iOS 触摸屏似乎无法识别 tabindex=""。

【讨论】：

【解决方案3】：

可以在 CSS 的帮助下使用 label 结合 input[type="checkbox"] 和 :checked 伪选择器来实现存储状态

参见https://developer.mozilla.org/en/CSS/%3achecked的示例

【讨论】：