Menu di navigazione a 3 stati con CSS e immagini gif

Un piccolo ripasso per questi due termini molto usati ed applicati nelle pagine web.

Il rollover viene utilizzato quando si vuole cambiare lo stato di un elemento (o più di uno) in una pagina al passaggio del mouse; viene applicato ad elementi ipertestuali e serve per far capire all' utente che ha posizionato il mouse sopra un collegamento.

Il preload consente di "precaricare" l'immagine in modo tale che, ultimato il caricamento della pagina, l'immagine che deve apparire al posto della prima, sia già a disposizione sul pc dell'utente e non debba attendere il caricamento della stessa.

Cominciamo a vedere il codice HTML per la nostra barra di navigazione. Si tratta di una lista con tag che conosciamo benissimo, solo che le daremo un altro aspetto. Questo primo esempio è un file htm al quale non è stato applicato nessun foglio di stile. L'esempio finale, invece, ci darà questo risultato.

Bella differenza eh? Per avere quanto appena visto, si devono creare 3 immagini gif. Perchè 3? Perchè avremo una barra di navigazione a 3 stati:

il primo è il link che porta in un'altra pagina;

il secondo è il rollover (cambio di colore) per far capire che si tratta di un link;

il terzo è lo stato "active", cioè "segnalare" la pagina in cui ci si trova e non associare nessun link. Le tre immagini sono:

Immagine per il link
Immagine per il link
Immagine per lo stato hover
Immagine per lo stato hover
Immagine per lo stato active
Immagine per lo stato active

Cominciamo a vedere il codice utilizzato; premetto che la barra di navigazione è stata inserita in un #DIV, chiamato div#barra_nav il cui codice è:

div#barranav{
width:85%;
margin-top:20px auto;
padding-top:0;
height:27px;
}

Le gif saranno usate come sfondo e le dimensioni sono di 130 x 25; l' altezza del div contenitore (barra-nav) è di appena 2 px più alta, in modo tale da far vedere i bordi e gli angoli arrotondati. Adesso prepariamo lo stile per ul e li, in questo modo:

div#barranav ul{
list-style-type:none;
margin:0;
padding:0;
}
div#barranav li{
float:left;
margin:0 2px 0 0;
padding:0;
}

Per il li impostiamo il float:left in modo tale da poter affiancare le gif e le scritte su di esse. Adesso passiamo allo stato dei link:

div#barranav a{
display:block;
width:130px;
height:27px;
line-height:22px;
text-decoration:none;
background:url("link.gif") no-repeat top center;
color:#fff;
font-variant:small-caps;
font-size:.8em;
font-weight:bold;
}

Il codice seguente si riferisce allo stato hover del nostro pulsante:

div#barranav a:hover{
background: url("hover.gif") no-repeat top center;
color:#336;
}

In questo caso andiamo a dichiarare il percorso dell'immagine che ci serve al passaggio del mouse e un colore per la scritta sulla stessa. Adesso passiamo alla cosa più importante: lo stato active. In tutte le pagine si deve assegnare all'elemento della lista un selettore id, unico in tutta la pagina e questa operazione la si deve fare in tutte se non vogliamo che appaia la mano del link quando si passa su di esso; il codice è:

div#barranav li#active{
width:130px;
height:27px;
line-height:22px;
background:url("activelink.gif") no-repeat top center;
color: #fff;
text-indent:11px;
font-size:.8em;
font-weight:bold;
font-variant:small-caps;
}

Non andiamo a fare altro che dichiarare in tutto e per tutto il nostro stato attivo e, soprattutto, che non sia presente nessun collegamento. Nel <body> avremo, per quanto riguarda lo stato active, il seguente codice:

<div id="barranav">
<ul>
<li id="active">Home</li>
.................
</ul>
</div>

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