views:

156

answers:

1

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?

+2  A: 

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.

Robert
That's exactly the effect I'm going for. I figured that it would only be possible with javascript enabled. In fact, that effect is used throughout the site and I think it greatly increases the usability of twitter for most people. I don't think it's necessary that it even lead to an actual page. I think it can be an href pointing to "#" and javascript looking for an onclick event. If it is not active it activates and if it is inactive it unloads. Unfortunately this solution doesn't degrade gracefully because it would fail to take them to account settings with a "#" href.
Andrew De Andrade
That's why the `href` is a valid link, and not just #, so that if javascript is disabled it won't return false, and they're taken to the page.
Robert
But will I still be able to maintain the click to open and click to close effect? If I point that link to a real page, won't even the users with javascript be taken to that page instead of seeing the dropdown menu? Can I make it so only users with Javascript disabled are not taken to another page and those with javascript enabled stay on the current page and see the dropdown menu?
Andrew De Andrade
Yeah, that's what the `return false` is for within the onclick function. It will prevent the default action (going to the page). If Javascript is disabled, it won't `return false`, and they'll get taken to the page.
Robert
Awesome. Thanks. I'm finishing some other CSS details on the menu now. I'm going to try out your suggestion tomorrow probably and then report back.
Andrew De Andrade