Pure CSS Clickable Events Without :target

http://www.ryancollins.me/?p=1041

by dwynings • 14 years ago

79 15 14 years ago

This is pretty slick. A couple of tiny problems, though: it doesn't work in Opera, the dropdowns close immediately in Firefox, and clicking on an open dropdown doesn't close it again. Still, very neat. Even works on iOS!

Steuard• 14 years ago

Interesting: on my Mac laptop running Firefox (11.0), physically clicking the trackpad works, but a single tap (my usual) does nothing. A double tap does work, but it selects the first word in the menu as well. It's a cute demo, but as it stands I wouldn't want to use it for anything serious.

user24• 14 years ago

Confirmed on mine, same setup.

ricardobeat2• 14 years ago

Funny how things circle back.

This was the norm for drop-down menus before jQuery took over (more commonly used with :hover instead of :active). It's still used as a fallback and for simple drop-downs/tooltips.

true_religion• 14 years ago

This wasn't the norm because IE at the time couldn't handle :hover events properly on all delegations.

So everytime you used CSS :hover, you still needed a javascript shim to keep IE happy.

ricardobeat2• 14 years ago

That's IE6, IE7 is fine. It was the norm, javascript was just a fallback. And if you go further back to Dreamweaver days, javascript was the norm again (remember MM_clusterufck)?

firefoxman12• 14 years ago

This works really well on touchscreens. A common problem with pure :hover dropdowns is that they only display for like a half second when you touch with your finger. I would have :hover AND :active do the exact same behavior to make this cross-platform.

tommi• 14 years ago

On the other hand it doesn't work at all with keyboard.

firefoxman12• 14 years ago

True, you would need :focus, but then it wouldn't hide on mouseout.

zxy• 14 years ago

The cool thing :target allowed was those css3 only lightboxs (http://tympanus.net/Tutorials/CSS3Lightbox/). I might play around with this method and see if it works as well.

buro9• 14 years ago

I put a pure CSS drop down navigation thing on http://www.lfgss.com/ a few weeks ago and the users love it for being usable before the page has finished loading.

I love it for reducing some of the need for maintaining JavaScript for this kind of thing and that it works better than jQuery tabs (reflows on smaller screens).

The result is that I'm now looking at CSS for more things.

I would recommend making the drop down element an anchor though, rather than mucking around with adding cursors to try and get the interactivity communicated.

jacobr• 14 years ago

This is preferable to :hover if it works ok cross-browser. I think/hope that most web developers have realized by now that displaying new UI-elements on hover is a bad idea, at least if they will hide other elements. Moving your mouse around is not "intent" to perform an action. A slight delay on a mouseover event is less evil though.

Pure CSS Clickable Events Without :target

Related Stories