Menu con mini-icone

Uno dei temi senza dubbio più seguiti nel web design sono i menu di navigazione.
Ritorniamo a parlare così di menu con un'idea che combina ed estende due soluzioni che abbiamo
visto in uno degli ultimi articoli sui menu che presentati qui su HTML.it, ovvero i
Menu a minitabs.

Vediamo subito l'esempio: si tratta di un menu orizzontale con mini-icone, in cui la voce attiva
e quelle in fase :hover hanno una sottolineatura per evidenziare rispettivamente lo stato attuale
e quello potenziale.

Ma prima di procedere con il foglio di stile, diamo uno sguardo al codice HTML dell'esempio: si tratta
di una semplice lista ordinata che racchiude i link. Ogni list-item ha un id per poter identificare
in maniera univoca il link che lo contiene, e il list-item che contiene il link in stato attivo (ovvero quello che
indica la pagina corrente) ha una classe "current". Ecco il codice:

Procediamo ora con il CSS. Per prima cosa la lista che contiene il menu verrà resa float così da contenere le singole voci:

A questo punto eliminiamo margini, padding e marcatore di default da lista e list-item:

Rendiamo float i list-item, così da poterli affiancare, e lasciamo un margine destro di 1em così da distanziarli un po':

Ora la parte comune dei link: verranno resi float con del padding tale da poter sistemare le icone di sfondo,
che definiremo in seguito. Si eliminerà la sottolineatura, si renderà il testo in grassetto e si
specificherà il colore per lo stato normale:

Definiamo quindi lo stato :hover, in cui aggiungeremo un bordo inferiore e cambieremo il colore del testo:

Procediamo con la regola per lo stato attivo, a cui aggiungeremo anche qui un colore e un bordo inferiore.
È importante notare che per sovrastare la regola appena vista, è necessario
accorpare anche lo stato :hover se non vogliamo che i link attivi risentano della fase hover degli altri link. La regola
preverrà dato che risulta più specifica.

Non resta quindi che definire le immagini di sfondo per le singole voci del menu, e qui viene utile il padding
che abbiamo definito per i link in una delle regole precedenti che lascerà quindi lo spazio sulla sinistra del testo:

Il nostro menu è così ultimato: volendo ci si può divertire con bordi, colore del testo e di sfondo
dei link per ottenere molte varianti. La compatibilità dell'esempio è piuttosto buona: è stato testato
con IE5, IE5.5, IE6, IE7 e le ultime versioni di Opera, Firefox e Safari. Codice e icone sono disponibili
per il download.

In conclusione, a proposito di icone: quelle usate nell'esempio sono le Free Mini Icons, ma se ne possono
trovare davvero tante anche su FamFamFam. Buon divertimento!

Se vuoi aggiornamenti su HTML.it inserisci la tua email nel box qui sotto:

REGISTRATI

Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing.

Sì No

Ho letto l'informativa sulla privacy

Non compilare