CSS  »  Articoli  »  CSS Menu 

Rollover sui link

Aggiungiamo una semplice regola che ci consenta di cambiare lo sfondo del tab su cui passa sopra il mouse:

div#navigation li a:hover{
    background-color: #f0f0f0}

Ecco come risulta il menu. Manca solo un ultimo passo.

"Aprire" il tab attivo

Torniamo per un attimo al codice HTML dell'esempio. Ho definito un list-item in maniera particolare, assegnandogli un id="activelink". Questo per poter definire una regola specifica per evidenziare il tab attivo, cioè quello che indica la sezione del sito a cui corrisponde la pagina corrente. In questo caso si tratta della pagina che rappresenta una ipotetica home page. Nelle pagine della sezione "grafica" del nostro ipotetico sito, il list item a cui verrà attribuito l'id="activelink" sarà quello che contiene la voce "grafica". Vediamo la regola:

div#navigation li#activelink a{
    border-bottom: 1px solid #fff;
    background-color: #fff;
    color: #603}

Ecco la pagina.
In sostanza abbiamo attribuito un bordo inferiore bianco che va a sovrapporsi al bordo del div che contiene il menu, e attribuito il colore di sfondo bianco uguale alla sezione sottostante, così da far spiccare la voce attiva. Ora il nostro menu è quasi completo.

Dietro quest'ultima regola c'è un concetto importante, che risponde alla domanda:
come mai la voce di menu attiva non risente della regola generica sui link e dello stato :hover che abbiamo definito nel passo precedente? La risposta la si trova nel concetto di Ereditarietà, cascade, conflitti tra stili, uno degli aspetti fondamentali dei fogli di stile. In sostanza, la regola per la voce attiva è espressa attraverso due selettori di id e un selettore di tipo, risulta così più specifica delle altre due regole sui link e quindi prevale.

Fissare il menu

Il nostro menu è quasi terminato. Tuttavia c'è un aspetto che non abbiamo ancora trattato: come mai le voci del menu risultano separate orizzontalmente tra di loro anche se non abbiamo margini orizzontali tra i list-item? La risposta è nel fatto che gli elementi della lista sono dichiarati inline, e che nel codice HTML i vari list-item sono scritti uno per riga, cioè sono separati da un invio, che verrà reso come uno spazio nella nostra pagina, proprio come succede come quando andiamo a capo con un semplice invio all'interno del testo di un paragrafo.
Se proviamo ad eliminare gli invii e scrivere i list-item tutti sulla stessa riga, ecco cosa succede. C'è da sottolineare il fatto che spazi e invii non vengono resi tra elementi block-level, ma in questo caso i list-item sono stati dichiarati inline e vengono trattati proprio come se fossero semplici parole all'interno di un contenitore.

Ora torniamo un attimo all'ultima versione realizzata. Se proviamo a stringere molto la finestra del browser, succede che i tabs si dispongono su più righe, una cosa che vorremmo evitare.
Ci viene in soccorso la proprietà white-space che definisce come vanno trattati gli spazi all'interno di un elemento. In particolare, il valore nowrap previene l'andata a capo se non specificatamente espresso nell'HTML attraverso un <br>. Aggiungiamo questa proprietà alla lista di navigazione:

div#navigation ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap}

Ed ecco la versione ultimata del nostro menu: provate ora a stringere la finestra del browser.

Due parole sul font: nelle pagine degli esempi ho volutamente dichiarato la dimensione del testo relativamente, così da poter mostrare come sia possibile ottenere tabs scalabili e che si adattano al contenuto. La scelta di dimensionare il testo dei tabs in pixel resta a voi. E ovviamente potrete anche divertirvi a modificare i colori dei bordi, di sfondo e del testo.

Due varianti

Dichiarare i list-item inline ha un vantaggio fondamentale: è possibile infatti rendere il menu centrato oppure allineato a destra solo specificando la proprietà text-align del div con id="navigation".

L'esempio finale

A chiusura di articolo ho preparato l'esempio finale costituito da cinque pagine praticamente identiche, in cui i link sono attivi e per ogni pagina viene evidenziata la voce del menu corrispondente. Per ottenere ciò è bastato spostando nel codice HTML di ciascuna pagina l'id activelink alla voce corrispondente alla pagina.

Tutti gli esempi sono contenuti in questo archivio zip. Alla prossima.

Altri articoli

Altre guide

Altre newsletter