Realizzare un menu di navigazione con effetto rettangolo sullo stato hover

L'effetto consiste nel far apparire un rettangolo con bordi e sfondo colorato e dopo aver scelto il link, visualizzare ancora il rettangolo per indicare la pagina in cui ci si trova. Cominciamo, come sempre, a far vedere il risultato finale, per poi spiegare il codice.

Ho inserito il menu che avete visto in un box contenitore, che ho nominato div#container. Il suo codice è:

div#container{
border:1px solid #666;
width:70%;
margin:10px auto;
padding:0;
text-align:left;
}

Il margin:10px auto mi è servito per tenere al centro della pagina il box; oltre questo e per fare in modo che anche con altri browser la gabbia sia centrata, ho inserito nel body (della dichiarazione CSS), non della pagina, il seguente rigo: text-align:center. Dopo aver dichiarato il contenitore, preoccupiamoci di creare il menu, con dei semplici tag ul e li. Il codice è:

div#container ul{
margin:0;
padding:0;
list-style-type:none;
}

Ho eliminato margini e padding ed inoltre non ho voluto nessun punto elenco predefinito, di conseguenza ho scritto: list-style-type:none. Per quanto riguarda il tag li, abbiamo:

div#container li{
margin:10px 0 0 10px;
padding:0 0 10px 0;
text-align:left;
}

Per fare in modo che tra un rigo e l'altro ci sia un pò di spazio in più per far vedere bene l'effetto, ho impostato, nel padding, 10px. Adesso passiamo ai link del menu e precisamente:

div#container li a, div#container li a:visited{
color:#369;
text-decoration:none;
margin:5px 10px;
padding:5px 10px;
}

I due stati, da scrivere rigorosamente secondo le specifiche nell'ordine come sopra, hanno un carattere di "peso" normale e senza sottolinetura. Adesso veniamo alla parte che ci interessa di più:

div#container li a:hover{
color:#369;
text-decoration:none;
margin:5px 5px 5px 10px;
padding:5px 5px 5px 10px;
border-top:1px solid #73848c;
border-right:1px solid #73848c;
border-left:1px solid #73848c;
border-bottom:1px solid #f00;;
background-color:#e7e7e7;
font-weight:bold;
}

È grazie a questo codice che noi abbiamo l'effetto "rettangolo" intorno al link; vedere, infatti, le 4 dichiarazioni per quanto concerne il bordo; se avessi deciso di avere un bordo di colore uniforme, avrei potuto scriverlo solo una volta. E per il rettangolo che rimane fisso quando stiamo visitando "quella" pagina? Ecco il codice:

div#container li#qui{
color:#369;
padding:5px 5px 5px 10px;
margin:5px 5px 5px 20px;
border-top:1px solid #73848c;
border-right:1px solid #73848c;
border-left:1px solid #73848c;
border-bottom:1px solid #f00;;
background-color:#e7e7e7;
font-weight:bold;
width:90px;
}

Da notare che all'interno del div#container c' è n' è un altro ben specifico: li#qui: questo serve per fare in modo che il tag li, con nessun link associato, abbia un id ben preciso e che ci si deve riferire solo e soltanto ad esso. Questo fa in modo che nella pagina abbiamo un riferimento ad esso quando vogliamo visualizzare lo stato della nostra navigazione.
Chiaramente si possono cambiare tutti i colori dei bordi del rettangolo ed anche la dimensione; siccome non avevamo dei link molto estesi, ho settato la lunghezza a 90 pixel.
Alla prossima.

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