L'interfaccia di Vista sarà conosciuta a tutti i lettori di HTML.it,
e più in generale alla maggior parte degli utilizzatori di un PC.
In questo appuntamento vedremo come realizzare un menu che presenta
il look and feel del menu di una finestra del sistema operativo
Microsoft con grafica, HTML e CSS. Cominciamo subito presentando
l'esempio e il suo screenshot:
Come si potrà notare il menu è a tre stati: attivo per la voce
che porta alla pagina corrente ("Prodotti" nell'immagine sopra), hover
per la voce su cui si passa il mouse ("Contattaci subito" nello screenshot)
e a riposo per tutte le altre. Da evidenziare
inoltre che i link sono auto-adattanti in larghezza, e questo consente molta flessibilità
e uno spazio orizzontale ottimizzato al meglio. La realizzazione del menu
non richiede molto lavoro e attraversa sostanzialmente tre fasi: grafica, HTML e CSS.
La grafica del menu
Per ciò che riguarda la grafica, l' esempio utilizza due sole immagini di sfondo:
una che viene attribuita all'intero menu e l'altra per i link. Vediamole:
Il menu è alto 35 pixel e l'immagine per i link contiene gli stati
attivo e hover combinati. Da notare che, sebbene lo sfondo per il menu possa essere anche largo
un solo pixel dato che viene ripetuto orizzontalmente, lo sfondo per i link
invece dovrà essere sufficientemente grande da contenere la voce più lunga del menu
a carattere medio-grande.
Il markup del menu
Siamo ora pronti a procedere con il codice HTML dell'esempio:
si tratta di una semplice lista non ordinata che contiene i vari link. Le voci
testuali sono però racchiuse in un elemento span aggiuntivo,
che consente molta più personalizzazione a livello grafico e funzionale:
<ul id="menu">
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>Prodotti</span></a></li>
<li><a href="#"><span>Servizi</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contattaci subito</span></a></li>
</ul>
Alla lista viene attribuito un id="menu", mentre la voce che contiene il link alla pagina
corrente dovra avere un attributo id="current" sul list-item. Tornando agli span:
questi sono praticamente indispensabili se si vuole realizzare un menu con voci auto-adattanti in larghezza
e rollover che sia funzionale, e che venga visualizzato correttamente anche su Internet Explorer versione 6 e inferiori.
Ci forniscono infatti un aggancio grafico supplementare che comunque non intacca la presentazione
di default della pagina, né l'accessibilità dato che gli span sono elementi neutri in linea
per eccellenza.
Il CSS del menu
Siamo ora pronti a procedere con il CSS del nostro menu, che si presenta
piuttosto semplice. Per prima cosa, le dichiarazioni sulla lista. Dato che useremo estensivamente la
proprietà float per rendere auto-adattanti le singole voci sarà necessario contenere i float.
In questo caso ho usato la tecnica Float Nearly Everything che si rivela semplice
e robusta: basterà rendere float la lista e specificarla larga al 100%. Verranno attribuiti
poi colore del testo e sfondo per l'intero menu. Nella seconda regola vengono annullati
margini, padding e marcatore da lista e list-item:
ul#menu{float: left;width: 100%;color: #DDD;
background: #363636 url(menuBk.png)}
#menu,#menu li{margin: 0;padding: 0;list-style-type: none}
Per ciò che riguarda link e span, questi verranno entrambi resi float
così da poter affiancare le voci del menu. Si stabilisce poi un altezza pari a
35 pixel, ovvero l'altezza di una singola voce grafica del menu.
La dichiarazione sul line-height serve per centrare il testo verticalmente:
#menu li, #menu a, #menu span{float: left;height: 35px;line-height: 35px}
Siamo arrivati alla parte centrale dell'esempio, ovvero
quella che riguarda l'impianto grafico. Prima di procedere con il codice, vale la pena
di soffermarsi sullo sfondo dell'esempio. Rivediamolo:
Concentriamoci per un attimo solo su una delle due porzioni verticali dell'immagine,
sia essa relativa ai link in fase :hover o attiva. Disponiamo di due elementi su cui
attribuire la porzione dell'immagine, ovvero un link e lo span al suo interno. Giocheremo
sulla proprietà padding e sul fatto che possiamo attribuire un lato dell'immagine
a ciascuno dei due elementi. Vediamo come:
Ai link viene attribuita la porzione sinistra dell'immagine, insieme a un padding
sinistro di 15 pixel. Per gli span, analogamente, si userà il lato destro dello sfondo,
con un padding destro di 15 pixel. La spaziatura tra i due estremi grafici di una
singola voce risulterà così bilanciata, e grazie al padding sui link lasceremo intatto
il lato sinistro così da impedire che lo span lo copra graficamente per intero e ottenendo
quindi una continuità grafica. Nell'immagine sopra, la parte più scura evidenzia la
porzione di immagine relativa proprio allo span.
A questo punto si tratta di stabilire il padding per link e span e gli sfondi
solo per le voci in fasi :hover e attiva. Possiamo ora procedere con il
CSS, che per comodità del lettore riporto per intero:
ul#menu{float: left;width: 100%;color: #DDD;
background: #363636 url(menuBk.png)}
#menu,#menu li{margin: 0;padding: 0;list-style-type: none}
#menu a, #menu span{float: left;height: 35px;line-height: 35px}
#menu a{text-decoration: none;color: #DDD;padding-left: 15px}
#menu span{padding-right: 15px;cursor: pointer}
#menu a:hover{background: url(vistaBk.png) top left;color: #EEE}
#menu a:hover span{background: url(vistaBk.png) top right}
#menu #current a{background: url(vistaBk.png) bottom left;color: #FFF}
#menu #current span{background: url(vistaBk.png) bottom right}
Il nostro esempio è così ultimato.
Con due sole immagini e una decina di regole CSS abbiamo ottenuto
un menu grafico flessibile, accattivante e robusto. Buona
infatti la compatibilità cross-browser: è stato testato con successo
su Internet Explorer dalla versione 5.5 alla 8, oltre che su Opera,
Firefox, Safari e Google Chrome. Codice e immagini sono disponibili
per il download. Alla prossima.
