Menu di navigazione a tab verticali con i CSS

È un tutorial molto interessante a dire il vero, che ci spinge ad usare sempre più i CSS ed a non avere limiti con quello che si ottiene.

Questa riflessione mi ha portato a pensare come poter ottenere un risultato simile, ma in senso verticale. Pensate ad una rubrica, per esempio. Scorriamo dall' alto verso il basso, con le mani, quando cerchiamo il nome di un amico. Potremmo scorrere con il mouse una parte di pagina che visivamente è simile alla nostra rubrica? Io credo di si e vi dimostro come l' ho ottenuto. Mi preme precisare che quanto realizzato non ha nulla a che vedere con il metodo adottato dall' autore, nel sito più su menzionato.

Prima un po' di teoria

Prima di passare alla realizzazione vera e propria del menu verticale, vorrei esporre concettualmente come l' ho pensato. In un box [contenitore] ho posizionato nella parte sinistra il testo; nella parte destra, invece, ho posizionato 4 immagini che saranno i link [o tab] attraverso i quali poter raggiungere le altre pagine del sito. Il metodo usato è stato quello delle immagini mappate con i CSS, del quale ne ho parlato in un articolo precedente, non molto tempo fa. Per facilitare l' individuazione degli elementi, riporto di seguito il nome che ho dato ai div:

Le immagini utilizzate

Per avere questi tab ho realizzato 4 immagini del tutto simili ad una barra di navigazione, ma in senso verticale, con un editor grafico. Al momento i CSS non permettono di scrivere in verticale anche se attualmente l' unico browser nel quale è possibile visualizzare una cosa del genere è solo IE. Di seguito una parte dell' immagine utilizzata per il menu:

Immagine utilizzata per la realizzazione dei tab verticali. Per l' esempio in oggetto è presente la scritta: Link 1
Immagine utilizzata per la realizzazione dei tab verticali

anche se nel file finale sarà posizionata verticalmente.

Adesso avanti con il codice

Cominciamo a vedere il punto di partenza di questo articolo: è una semplicissima pagina di solo testo con tag <div>, H1, p ecc... Verrà trasformata in seguito. Scriviamo il codice per l' elemento contenitore:

#container{
margin:20px auto;
padding:0;
position:relative; 
width:536px;
}  

Da notare la posizione relativa assegnata in quanto metteremo un elemento [#nav] con posizione assoluta al suo interno.

#content{
margin:0; 
padding:0; 
float:left; 
text-align:left; 
border:1px solid #4a679f; 
width:498px; 
} 

Questo codice appena scritto è quello per l' elemento "content"; dove, cioè, inseriremo del testo. La regola di Tantek, a proposito del box model, torna sempre utile per la corretta visualizzazione anche su browser non standard.

Il menu laterale

Il menu laterale merita una particolare attenzione. Esso è composto dal #div navigation ed al suo interno posizioneremo un altro elemento con ID univoco, associato al tag <ul>: #nav. Andiamo con ordine:

#navigation{
margin:0; 
padding:0; 
width:36px; 
height:490px; 
float:right; 
}

I due elementi "dirimpettai", #content e #navigation, ci servono entrambi flottanti in modo tale da averli uno accanto all' altro. Il codice per il box #nav è il seguente:

ul#nav{ 
margin:0; 
padding:0; 
list-style:none;
position:relative; 
width:36px; 
height:490px; 
background: url(menu.jpg) no-repeat top;
}  

Prima di procedere con la descrizione del codice, vorrei mostrare lo stato di "avanzamento dei lavori" :))). La pagina di esempio mostra quanto fino ad ora spiegato, senza avere la possibilità di linkare le voci del menu a tab.

Con il codice scritto più su abbiamo annullato margini e padding alla lista ed eliminato i marcatori di default (list-style:none;). È stata data una posizione relativa poichè verranno posizionati al suo interno i link, in maniera assoluta. Width ed height assegnati alla lista sono uguali a quelli dell' immagine.

ul#nav 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 margini e padding e la rendiamo un elemento di blocco [display:block]. Adesso dichiariamo il codice per i link:

li#nav-link1{
right:0;
top:10px; 
width:36px; 
height:111px; 
} 
li#nav-link2{ 
right: 0; 
top: 131px; 
width:36px; 
height:111px;
} 

Siccome ogni voce di elenco viene posizionata in maniera assoluta rispetto a ul#nav li, basta fare un pò di conti per l' area sensibile al link, quando si passa con il mouse. Il primo collegamento è molto semplice ed intuitivo: deve cominciare dall' alto di 10 pixel; altezza e larghezza sono uguali alla misura della gif: 36 X 111 pixel. Per il secondo link, invece, i calcoli sono leggermente diversi: Dall'alto l' area sensibile deve cominciare ad una misura di 131 pixel [10px lo spazio della prima gif dall'alto + 111 pixel la prima immagine + 10 px il margine tra una gif e l' altra]. Così di seguito per tutte le altre aree da linkare.

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

#nav .alt { display:none; }  

Siccome tutta l' area deve essere linkabile, width ed height sono stati settati uguali al 100%; inoltre il tag a è stato reso come elemento di blocco. L' ultimo rigo elimina il testo dall' immagine che si vedrebbe se non si creasse questa classe, grazie alla proprietà "display:none". Questo era l' ultimo passaggio per la creazione del nostro esempio. Possiamo vedere la pagina completa e con i link funzionanti su ogni singola immagine.