Menu css verticale con prima lettera iniziale visibile in apertura e il resto del nome del link visibile sullo stato hover.

Questa mappa d’Italia realizzata in css è una versione aggiornata postata un anno fa sul mio sito per renderla compatibile con Internet Explorer 6.

Preview della mappa d’italia

Questa mappa css d’Italia usa un immagine per ogni provincia posizionate in modo assoluto al pixel preciso per ricostruire la mappa d’Italia intera. La proprietà css opacity è usata sul stato hover dei link e rende visibile le informazione relative alla provincia scelta grazie alla proprietà display.

Sempre un pò curiosà di rifare esempi flash puramente in css, ho ripreso l’idea della galleria flash chiamata Illusion creata da Flep.

Togliendo effetto di riflessione sulle immagine e scroll orizzontale (potrebbero essere aggiunti via javascript o per il scroll con la proprietà css overflow), ecco il risultato…

Preview della galleria css in apertura:

Visualizzazione dell’immagine e della sua descrizione sullo stato hover:

Menu verticale con cambio di colore e freccia animata sul stato hover e stato selezionato

Menu css bianco/nero in versione orizzontale e verticale con immagine visibile sul stato hover del pulsante.

Preview del menu css orizzontale:

Preview del menu css verticale:

Menu css orizzontale con icon ridimensionati sul stato ‘over’ e posizionato a sinistra o destra con la proprietà css float.

Menu css di tipo drop down orizzontale basato sul tutorial Come creare un menu css dropdown orizzontale di base.

Questo menu dropdown fa l’uso di più classe ‘colorate’ per potere applicare un immagine di sfondo ad ogni categorie con la proprietà css background.

Nella sezione Photoshop è stato spiegato come creare un menu di navigazione.
Questo menu è stato alla sua volta convertito in Flash CS3.

Di seguito la mia versione del menu in CSS.

Menu css dropdown orizzontale che apre una seconda riga con sub-links

Questo menu a misura fissa è creato usando un lista di tipo non-ordinato e liste innestate per contenere i secondi links del menu giocando con la proprietà css visible per nascondere e fare apparire il sub-menu quando necessario. L’effetto ‘roll over’ dei pulsanti fa l’uso d’un unica immagine posizianata con la proprietà css background-position.