CSS  »  Articoli  »  CSS Menu 

Siamo arrivati alla parte "dinamica" dell'esempio, ovvero quella per il link attivo della pagina che indica la voce del menu corrente (il cui list-item viene individuato da un id="active") e i link in fase hover. Basterà in questo caso dichiarare per i due selettori l'immagine del tab azzurro che abbiamo visto in apertura:

Per ultimare il tutto, anche per gli span relativi alla voce attiva o al link in fase :hover verrà specificato l'immagine di sfondo più accesa, e un colore blu in modo da rendere ancora più marcata la differenza con gli altri link:

Il nostro esempio è così ultimato: con un sapiente uso del padding, due sole immagini di sfondo e della proprietà float abbiamo realizzato senza ricorrere ad hack nè workaround un menu auto-adattante in larghezza e con un effetto elastico in altezza.

In conclusione, ho preparato anche una variante che non usa gli span aggiuntivi, che però non ha il rollover grafico sui link: la differenziazione grafica è solo sul link attivo.

La compatibilità dei menu visti è decisamente buona: sono stati testati su Internet Explorer 5, 5.5, 6 e la beta 2 della versione 7, Opera, Firefox e Safari.

Il testo dei menu è ridimensionabile, dato che quello della pagine di esempio è impostato in percentuale: in caso di esigenze pratiche particolari si può impostare un font-size in pixel per la lista che racchiude l'intero menu. In questo caso la mia raccomandazione è di usare una dimensione di almeno 10-12 pixel. Esempi e immagini sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter