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:
<ul id="menu">
<li id="home"><a href="#">home</a></li>
<li id="search" class="current"><a href="#">search</a></li>
<li id="products"><a href="#">products</a></li>
<li id="print"><a href="#">print</a></li>
<li id="contact"><a href="#">contact us</a></li>
</ul>
Procediamo ora con il CSS. Per prima cosa la lista che contiene il menu verrà resa float così da contenere le singole voci:
ul#menu{float:left;width:100%}
A questo punto eliminiamo margini, padding e marcatore di default da lista e list-item:
ul#menu,ul#menu li{list-style-type:none;margin:0;padding:0}
Rendiamo float i list-item, così da poterli affiancare, e lasciamo un margine destro di 1em così da distanziarli un po':
ul#menu li{float:left;margin-right:1em}
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:
ul#menu a{float:left;padding:5px 0 4px 18px;
text-decoration:none;font-weight:bold;color:#82C90A}
Definiamo quindi lo stato :hover, in cui aggiungeremo un bordo inferiore e cambieremo il colore del testo:
ul#menu a:hover{border-bottom: 3px solid #83D5FF;color:#333}
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.
ul#menu li.current a,ul#menu li.current a:hover{
color:#FF37BB;border-bottom: 3px solid #54B4E5}
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:
li#home a{background: url(home-icon6.gif) no-repeat left center}
li#search a{background: url(search-icon-blue.gif) no-repeat left center}
li#products a{background: url(shopping-bag-blue.gif) no-repeat left center}
li#print a{background: url(printer-blue.gif) no-repeat left center}
li#contact a{background: url(email-blue.gif) no-repeat left center}
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!
