
Pure CSS Clickable Events Without :target - dwynings
http://www.ryancollins.me/?p=1041
======
Steuard
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
Confirmed on mine, same setup.

------
ricardobeat
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
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.

~~~
ricardobeat
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)?

~~~
LinaLauneBaer
Can you enlighten me what MM_clisterufck is?

~~~
pluies
If I'm not mistaken, Dreamweaver uses a lot of custom JS code to generate
pages and usually prefixes it with "MM_".

I've had the displeasure of seeing one of these functions recently, and let's
just say it's not pretty JS.

~~~
eli
No doubt an abbreviation for Macromedia, Dreamweaver's original creator.

------
taylorfausak
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!

------
buro9
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.

------
firefoxman1
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
On the other hand it doesn't work at all with keyboard.

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

------
jacobr
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.

------
zxy
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.

