Passando il cursore del mouse sulla barra di navigazione di un sito web può causare i pulsanti del menu o collegamenti per cambiare il colore o dispiegano per visualizzare i sottomenu. Codifica l'effetto rollover è abbastanza semplice. Creare un menu che si estende una linea di pulsanti nella parte superiore del tuo sito web e, quando un visitatore passa il suo cursore su un pulsante nel menu, il colore del pulsante cambia tonalità a causa della funzione di ribaltamento applicata.

istruzione

1 Aprire il file HTML in Blocco note o il vostro editor di testo preferito. Aggiungere questo codice al foglio di stile CSS che passa i controlli al menu:

navcontainer ul

{

padding-left: 0;

margin-left: 0;

background-color: # 036.333;

colore bianco;

float: left;

width: 100%;

font-family: Arial, Helvetica, sans-serif;

}

navcontainer ul li {display: inline; } Navcontainer ul li a

{

padding: 0.2em 1em;

background-color: # 036.333;

colore bianco;

text-decoration: none;

float: left;

border-right: #fff solido 1px;

}

navcontainer ul li a: hover

{

background-color: # 369888;

colore: #fff;

}

2 Sostituire entrambe le istanze di "036.333" con il codice colore desiderato per la barra dei menu e pulsanti quando nessuno sta passando con il mouse su di loro. Sostituire "369888" con il codice colore desiderato per i pulsanti per modificare a quando un mouse visitatori su di loro (vedi Risorse per la tabella di colore esadecimale). Sostituire il colore "bianco" con il colore che si desidera che il testo del pulsante di essere. Sostituire "Arial, Helvetica, sans-serif" con il nome del font desiderato.

3 Aggiungere questo codice tra i tag body del documento HTML:

<Div id = "navcontainer">

<Ul id = "navlist">

<Li id = "attivo"> ​​<a href="http://www.itemonelink.com" id="current"> Articolo Uno </a> </ li>

<Li> <a href="Item"> http://www.itemtwolink.com "> Articolo Due </a> </ li>

<Li> <a href="Item"> http://www.itemthreelink.com "> Articolo Tre </a> </ li>

<Li> <a href="Item"> http://www.itemfourlink.com "> punto quattro </a> </ li>

<Li> <a href="Item"> http://www.itemfivelink.com "> Articolo Cinque </a> </ li>

</ Ul>

</ Div>

4 Sostituire "Articolo Uno", "Item Due", ecc, con i nomi di ciascun tasto. Sostituire ogni URL sulla stessa linea, come i nomi degli elementi con il collegamento specifico in cui si desidera visitatori indirizzati quando fanno clic su tale pulsante.

5 Salvare e caricare il file HTML.