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?
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?
Share Improve this question asked Sep 28, 2010 at 22:37 Andrew De AndradeAndrew De Andrade 3,6165 gold badges34 silver badges37 bronze badges 3- jsfiddle (jsfiddle) please or some code... – EKet Commented Sep 28, 2010 at 22:40
- jsfiddle, huh? You want me to post some code? Given the question, I didn't think it was necessary to post any code. – Andrew De Andrade Commented Sep 28, 2010 at 23:18
- @AndrewDeAndrade By code he means html/css that you've tried so far. – canon Commented Jun 15, 2012 at 19:00
3 Answers
Reset to default 4I'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.
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="".
It's possible to achieve with help of CSS use label in bination with input[type="checkbox"] and :checked pseudoselector to store state
See example at https://developer.mozilla/en/CSS/%3achecked