Shiny Micro Menü in CSS3

Seit einigen Tagen benutze ich Path .. die App ist ziemlich schick und hat einige tolle UI Features die man so noch nicht gesehen hat. Mir hat es besonders das Menü angetan mit dem man seinen Status posten kann.

Am Samstag habe ich dann überlegt, daß man das auch mit CSS3 und vielleicht sogar ganz ohne JavaScript nachbauen könnte. Ich wollte es nicht 100% klonen sondern mich nur etwas inspirieren lassen.

Rausgekommen ist dann mein Menü inspiriert von Path das wirklich nur mit CSS3 und HTML gebaut wurde.

Das CSS findet ihr direkt im Quelltext der HTML Datei. Neben dem Tilde Selektor und ein paar abgefahrenen CSS3 Transitions besteht das einzige Problem im Grunde darin, daß ONCLICK die Menü Elemente herausfliegen und dann auch auf ihrer Position bleiben sollen wenn man den Mauszeiger vom Menü wegbewegt.

Die habe ich mit dem :CHECKED Selector gemacht .. das Input Feld wird ausgeblendet und das Label des Input Feldes dient als Menü Schaltfläche ..

Kann man natürlich auch mit :HOVER machen .. allerdings bleibt das Menü nur dann offen wenn sich die Maus darauf befindet … hier mein shiny Micro Menü .. ;-.)