Pure CSS Clickable Events Without :target

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.

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.

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!

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.

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.

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.

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.