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

Question

Effect I'm trying to achieve:

In Twitter's new redesign, they implemented a "sticky" dropdown menu for the account settings area.

Basically, when you click on your username in the black global nav bar at the top, a menu is toggled open and stays open until you click on one of the links or on your username name again to toggle it closed.

I'd like to achieve the exact same effect of a sticky menu with just CSS and HTML. I'm okay with using CSS3 features, but if this can be achieved without relying on CSS3, that's even better.

What I've tried so far

I can create the basic navigation menu with dropdown working with pure CSS and HTML, but only using the :hover pseudoclass. I tried out the :active pseudoclass, but unfortunately it doesn't "stick" and stay open.

Is this "sticky" dropdown effect even possible without relying on javascript? If it is not possible without relying on javascript, how should I handle this so it degrades gracefully?

Answer 1

I'm going off memory here as I cannot access Twitter from work. If I recall correctly, the same script is used on the main page to login. It creates a little popup type window that stays there even after moving the mouse.

If that's what you're talking about you can't achieve that with just CSS; it's a styling language, not a scripting language. The :hover/:active pseudo-class styles will all un-apply themselves as soon as that event stops.

The alternative with Javascript involved would be to make the button a link that leads you to an actual page. Then bind it's onclick to popup an absolutely positioned div that's hidden by default ( return false within the onclick to prevent following the link). This div isn't hidden until whatever condition you want to hide it with, and it starts off hidden, so if they don't have Javascript they won't know what they're missing.

Answer 2

Use the pseudo class :focus instead of :active . You might also need to use tabindex="" in your HTML to make an element accept focus.

However, iOS touchscreens don't seem to recognize tabindex="" .

Answer 3

It's possible to achieve with help of CSS use label in combination with input[type="checkbox"] and :checked pseudoselector to store state

See example at https://developer.mozilla.org/en/CSS/%3achecked