Menu di navigazione trasformato in mappa con i CSS

Ringrazio l'autore per avermi concesso la possibilità di "prendere a prestito" tale tutorial e di scrivere questo articolo.

I CSS ci permettono di trattare una immagine come se fosse una mappa, con delle aree sensibili e, cosa da non sottovalutare, il tutto attraverso un semplice elenco non ordinato. Come ho scritto nel titolo, avremo una barra di navigazione "mappata" e totalmente accessibile. Per poter fare questo esempio ho realizzato, con un programma di grafica, una immagine pari a 720 pixel di larghezza e 35 pixel in altezza. Qui di seguito una miniatura dell' immagine:

Miniatura della barra di navigazione utilizzata per l' esempio
Barra di navigazione

Su ogni scritta presente nell' immagine andremo ad applicare una zona "sensibile" che farà da link; inoltre utilizzeremo questo file grafico come background di un contenitore che ho nominato #barranav. Vediamo il codice:

#barranav{
margin:20px auto; 
padding:0; 
width:720px; 
height:35px; 
background:url(barranav.jpg) no-repeat transparent; 
}  

Fin qui nulla di nuovo per quanto riguarda la stesura di questa prima parte di codice. Adesso dobbiamo dichiarare un elenco non ordinato ed associarlo al contenitore; infatti abbiamo:

ul#barranav{ 
margin:0; 
padding:0; 
list-style:none; 
position:relative; 
width:720px; 
height:35px;
}  

Innanzitutto annulliamo margini e padding alla lista ed eliminiamo i marcatori di default (list-style:none;). È stata data una posizione relativa perchè verranno posizionati al suo interno i link, in maniera assoluta. Width ed heigt assegnati alla lista sono uguali a quelli dell' immagine.

ul#barranav li{
display:block; 
position:absolute; 
margin:0; 
padding:0; 
}  

Ogni singola voce "li" dell' elenco, stando a questo codice, viene posizionata in maniera assoluta; eliminiamo anche qui i margini ed il padding e la rendiamo come un elemento di blocco. Adesso passiamo a dichiarare i link:

li#barranav-link1{
left:0; 
top:0; 
width:120px;
height:35px;
}  

Siccome ho scritto precedentemente che ogni voce dell' elenco viene posizionata in maniera assoluta, questo codice esplica in maniera chiara la posizione nel contenitore generale, attraverso le proprietà left e top. Left e top rispetto a cosa? Ovviamente dal lato sinistro e dall' alto del contenitore #barranav. Quindi, come si può vedere dalla miniatura, la prima area sensibile sarà la prima a sinistra (Link 1). Indicando la larghezza e l' altezza della voce di elenco (width:120px; e height:35px;), andiamo a determinare l' area occupata da ogni elemento. Vediamo ora la seconda voce elenco:

li#barranav-link2{ 
left:120px; 
top:0; 
width:120px;
height:35px; 
}  

La posizione della seconda voce, come si evince dal codice, partirà, per quanto riguarda il lato sinistro, da 120 pixel e dall' alto sempre pari a zero. Anche qui si deve sempre indicare la larghezza e l' altezza; queste saranno sempre uguali avendo diviso la barra di navigazione iniziale in sei parti di 120 pixel ciascuna. Questo codice su riportato cambia di volta in volta per quanto riguarda la coordinata left. Inoltre dobbiamo assegnare un nome diverso per ciascuna area.

#barranav a{ 
display:block; 
width:100%;
height:100%; 
}  

Il codice che ho scritto qui sopra serve per rendere cliccabile tutta l' area occupata da ogni elemento della lista. Cosa è avvenuto: ho reso il tag a come un elemento di blocco e le dimensioni sono state impostare uguali al 100%, per fare in modo da avere un link che occupa tutta l' area a disposizione. In ultimo abbiamo:

#barranav .alt { display:none; }

In questo modo eliminiamo il testo dall' immagine che si vedrebbe se non si creasse questa classe, grazie alla proprietà "display:none;".
Siamo giunti alla fine di questo articolo e, come scrive l' autore nel sito da cui ho preso spunto, ci sono vantaggi e svantaggi. I primi ci offrono la possibilità di avere una mappa accessibile e visualizzabile su diversi browser. Gli "svantaggi" sono dati dal fatto che possiamo avere delle aree sensibili solo di forma rettangolare e nulla di più. Per questo ho voluto trasformare l' esempio riportato nel sito "constile.org" in una barra di navigazione con pulsanti di tale forma che è possibile vedere in questa pagina di esempio.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati