CSS3 Fly Out Menu

Follow me on Twitter | Visit my Website

Dieses Micro-Menü ist inspiriert von der Path App und kommt ohne JavaScript aus.
Mit nem Klick auf das Kreuz öffnet sich das Menü. Getestet habe ich das nur mit nem Firefox > 4 und dem Chrome > 13. Die Styles für den IE9 und Opera müsste man noch ergänzen.

Ich wollte einfach mal sehen ob das mit "normalen" CSS3 Mitteln und OHNE JavaScript zu machen ist. Man kann hier sicher noch mit Keyframes draufhauen und an den Transitions feilen.

Der Trick ist im Grunde das versteckte INPUT Feld das es mir sofern :checked (über das Label) ermöglicht die kleinen Icons ausgefahren zu lassen. Das würde sonst nur mit einem :hover funktionieren bzw. mit einem :active .. aber da auch wieder nur im Firefox.

Und wer möchte kann jetzt noch das CSS strippen :)

Nachtrag: Auf iOS und Android Geräten funktioniert die Aktivierung des Labels beim drücken nicht .. der Workaround: ein leeres onclick="" dem Label mitgeben. Alternativ kann man sich auch per JS drumrum debuggen.