Back to home page
Il Jester
My little dream is in developing

Dropdown menu e Harmonium menu in puro CSS3, senza javascript

web-design-1366344_960_720Qualche tempo fa ho parlato del fantastico menu in jquery, Superfish, che comunque consiglio per l’estrema facilità di implementazione e di utilizzo. Tuttavia, oggi voglio dimostrarvi come sia possibile creare un menu harmonium e un menu dropdown senza il minimo utilizzo di javascript, eppure con gli stessi effetti tipici del javascript (e in particolare di jQuery).

Parliamo naturalmente di tecniche correlate al CSS3, e dunque non pienamente compatibile con i browser datati, salvo non si vogliano adottare tecniche che permettano anche a questi browser di riconoscere gli standard del CSS3. Il che significa utilizzare javascript, cosa che vogliamo evitare.

Fortunatamente tutti i browser di ultima generazione hanno in dotazione gli standard CSS3 e dunque è interessante vedere cosa si può fare con questo standard.

Menu Harmonium

Creiamo prima di tutto la nostra lista in html:

A questo punto solo CSS:

Il risultato lo potete vedere su jsfiddle.

Menu Drop Down

Qui la questione si fa più interessante. Un menu tipo Superfish, ma senza jQuery o javascript. Solo puro CSS. L’html:

E ora il CSS:

Il risultato lo potete vedere su jsfiddle.

Niente javascript. Solo CSS3. Il che a tutto vantaggio della velocità delle nostre pagine web, seppure passeranno ancora parecchi anni prima che si potranno implementare tecniche che eguaglino perfettamente e pienamente quelle oggi disponibili tramite javascript e in particolare le varie librerie jQuery, Mootools ecc.