logo标签列表

如何使用纯CSS创建“粘性”下拉菜单？

javascripthtmlcssdrop-down-menu
3

我想要实现的效果：

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

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

我想用纯 CSS 和 HTML 实现完全相同的粘性菜单效果。我可以使用 CSS3 功能，但如果不依赖于 CSS3 就能实现，那就更好了。

我已经尝试过的方法

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

这种“粘性”下拉菜单效果是否可能不依赖于 JavaScript 而实现？如果没有 JavaScript 的情况下无法实现，我该如何处理以实现优雅降级？

请提供jsfiddle（http://www.jsfiddle.net）或一些代码... - EKet
jsfiddle，啥？你想让我发一些代码吗？鉴于问题，我觉得没必要发任何代码。 - Andrew De Andrade
@AndrewDeAndrade 他所说的“_code_”是指你已经尝试过的HTML/CSS代码。 - canon
3个回答
4
我在这里只能凭记忆，因为我无法在工作中访问Twitter。如果我记得正确的话，登录页面使用相同的脚本。它创建了一个小型弹出式窗口，即使移动鼠标后也会保留在那里。
如果您说的就是这个，您不能仅使用CSS来实现；它只是一种样式语言，而不是一种脚本语言。伪类样式:hover/:active将在事件结束时自动取消应用。
涉及Javascript的替代方法是将按钮制作成链接，以引导您进入实际页面。然后将其onclick绑定到绝对定位的默认隐藏div上（在onclick中使用return false以防止跟随链接）。此div直到您希望隐藏它的任何条件才被隐藏，并且初始状态下是隐藏的，因此如果他们没有启用Javascript，他们将不知道他们错过了什么。
这正是我想要的效果。我认为只有启用JavaScript才可能实现这一点。事实上，该效果在整个网站中都被使用，并且我认为它极大地增加了Twitter对大多数人的可用性。我认为它甚至不需要导致实际页面。我认为它可以是一个指向“＃”的href，并且JavaScript正在寻找onclick事件。如果它没有激活，它会激活，如果它处于非活动状态，则会卸载。不幸的是，这种解决方案无法优雅地退化，因为它将无法通过“＃”href带他们到帐户设置。 - Andrew De Andrade
这就是为什么 href 是一个有效的链接，而不仅仅是 #，这样如果禁用了 JavaScript，它就不会返回 false，并且用户可以访问该页面。 - Robert
但是我是否仍然能够保持点击打开和点击关闭的效果呢？如果我将该链接指向一个真实页面，那么即使使用JavaScript的用户也会被带到该页面，而不是看到下拉菜单吗？我能否使只有禁用JavaScript的用户不会被带到另一个页面，而启用JavaScript的用户仍停留在当前页面并看到下拉菜单？ - Andrew De Andrade
是的，这就是在onclick函数中使用“return false”的原因。它将阻止默认操作（转到页面）。如果Javascript被禁用，它不会“return false”，他们将被带到该页面。 - Robert
太棒了。谢谢。我现在正在完成菜单上的一些其他CSS细节。明天我可能会尝试你的建议，然后回报。 - Andrew De Andrade
1
使用 pseudo 类 :focus 代替 :active。您可能还需要在 HTML 中使用 tabindex = "" 使元素接受焦点。
然而，iOS 触摸屏似乎无法识别 tabindex = ""。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接