CSS  »  Articoli  »  CSS Menu 

I menu sono senza dubbio uno degli argomenti più gettonati qui su HTML.it. Dopo Menu con tab grafiche, Menu a minitabs e Tab con i CSS, eccoci quindi ad un nuovo appuntamento in cui vedremo un menu a tab grafiche centrate. Ecco una piccola anteprima dell'esempio e il suo screenshot:

Figura 1 - Screenshot dell'esempio

Si tratta di un menu piuttosto semplice graficamente, ma denso concettualmente dal punto di vista dell'implementazione. Vediamo anzitutto i vantaggi di una soluzione simile:

• Le tab sono senza dubbio una delle metafore più comuni per ciò che riguarda i menu orizzontali dato il loro elevato impiego nelle tipologie di siti più disparate
• È un modo tutto sommato semplice per ottenere un menu centrato, a volte necessario per questioni di design
• La pagina/sezione corrente è facilmente individuabile, dato che il tab corrispondente è l'unico che viene presentato "aperto", ovvero senza bordo inferiore
• Il testo è ridimensionabile, e ciascuna delle tab è adattabile al suo contenuto.

D'altra parte, l'esempio che presenterò in questo articolo ha un piccolo difetto che riguarda la compatibilità: non funziona su IE5.0. Questo browser è piuttosto obsoleto, e conta una percentuale di utilizzo davvero minima (si stima tra l'1 e il 2%). Per quanto ne so, è piuttosto difficile se non impossibile ottenere una versione delle tab grafiche centrate che funzioni su IE5, dato che questo browser non ammette padding su elementi inline.

Premesso ciò, siamo pronti a procedere a vedere l'implementazione dell'esempio.

Il markup e la grafica

Il markup dell'esempio è piuttosto semplice: si tratta infatti di una lista non ordinata che contiene i link. In aggiunta, il list-item che contiene la voce del menu attiva ha id="current". Ecco l'HTML:

Altri articoli

Altre guide

Altre newsletter