CSS  »  Articoli  »  CSS Menu 

L'effetto gloss è uno di quelli che più contraddistingue il Web 2.0. In questo articolo vedremo proprio come ottenere un menu gloss con grafica e CSS e con un'accattivante transizione grazie alla potente libreria jQuery.

L'ispirazione proviene dal sito Deezer, da cui ho provato a replicare il menu senza l'utilizzo di Flash. I menu con transizioni sono decisamente accattivanti, e dato che Deezer fa un uso estensivo di Flash non solo per il menu, il suo utilizzo è più che giustificato. È possibile però replicare l'effetto utilizzando HTML,CSS, grafica e Javascript: è questo lo scopo dell'articolo.

Nella prima parte vedremo come realizzare il menu gloss con rollover mediante grafica e CSS, per poi aggiungere un bell'effetto fade con jQuery nella seconda: otterremo un menu con markup leggero, accessibile e che degrada bene anche in assenza di Javascript. Cominciamo subito.

Esempio 1: un menu a due stati con rollover

Il nostro primo esempio usa markup minimale, due immagini di sfondo e poche regole CSS per ottenere un menu a due stati (stato normale e hover/attivo assieme) decisamente accattivante.

Cominciamo dalla grafica. Ciascun link è di 120px per 30px, e l'immagine di sfondo racchiude due linee di link, ovvero l'intero menu in stato normale e quello con le voci attive. L'intera immagine di sfondo è larga in totale quindi 480px e alta 60, eccola di seguito:

Figura 1 - L'immagine di sfondo del menu

In aggiunta, sarà necessaria un'immagine da ripetere orizzontalmente sull'intero contenitore del menu che è larga 10px e alta 30:

Figura 2 - L'immagine da ripetere orizzontalmente

Passiamo ora all'HTML dell'esempio, che è composto da una lista non ordinata di link contenuta in un div id="menu". Da notare il fatto che ogni list-item ha un id univoco così da individuare le singole voci del menu, e che il link che indica la pagina/sezione corrente ha class="active". Ecco il codice:

Siamo pronti a procedere con il CSS dell'esempio, che è piuttosto semplice: i lettori che hanno letto la serie Menu grafici con rollover e preload via CSS troveranno la sua implementazione piuttosto familiare.

Si tratta infatti di nascondere l'informazione testuale dei link e mostrare la porzione relativa dell'immagine di sfondo che compone il menu. In fase :hover e per lo stato attivo, la porzione grafica corrispondente al link sarà quella relativa alla seconda riga dell'immagine di sfondo.

In questo caso, per i singoli link vengono usati i posizionamenti assoluti e per l'image replacement viene usato il text-indent negativo. Dopo questa breve introduzione, eccoci alle regole del menu che si divide in tre sezioni logiche distinte: stili generici su lista, list-item e link; regole per i link in stato normale e infine regole per i link in stato attivo/hover.

Altri articoli

Altre guide

Altre newsletter