Nwlapcug.com


Come Rollover la barra di navigazione orizzontale

Come Rollover la barra di navigazione orizzontale


Passando il cursore del tuo mouse sopra la barra di navigazione di un sito Web può causare i pulsanti menu o collegamenti a cambiare colore o aprire per visualizzare il sottomenu. Codifica l'effetto rollover è abbastanza semplice. Creare un menu che si estende per una riga di pulsanti nella parte superiore del tuo sito Web e, quando un visitatore passa il cursore su un pulsante nel menu, il colore del pulsante cambierà tonalità grazie alla funzione di ribaltamento applicata.

Istruzioni

1

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

navcontainer ul

{

padding-left: 0;

margin-left: 0;

background-color: #036333;

colore: bianco;

float: left;

Larghezza: 100%;

font-family: arial, helvetica, sans-serif;

}

navcontainer ul li {display: inline;} navcontainer ul li un

{

Imbottitura: 0.2em 1em;

background-color: #036333;

colore: bianco;

Proprietà Text-decoration: none;

float: left;

Border-destra: 1px solid #fff;

}

navcontainer ul li un: al passaggio del mouse

{

background-color: #369888;

colore: #fff;

}

2

Sostituire entrambe le istanze di "036333" con il codice colore desiderato per i pulsanti e la barra dei menu quando nessuno è mousing su loro. Sostituire "369888" con il codice colore desiderato per i pulsanti modificare quando un visitatore mouses su di loro (Vedi risorse per 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 di tipo di carattere desiderato.

3

Aggiungere questo codice tra i tag body del documento HTML:

< div id = "navcontainer" >

< ul id = "navlist" >

< id li = "attivo" >< href = "http://www.itemonelink.com" id = "current" > un elemento < /a >< / li >

< li >< un href = "Item" > http://www.itemtwolink.com "> due elemento < /a >< / li >

< li >< un href = "Item" > http://www.itemthreelink.com "> tre elemento < /a >< / li >

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

< li >< un href = "Item" > http://www.itemfivelink.com "> cinque elemento < /a >< / li >

</UL >

< / div >

4

Sostituire "Elemento One", "Elemento due," ecc., con i nomi di ciascun pulsante. Sostituire ciascuno degli URL sulla stessa riga come nomi di elemento con il link specifico dove volete visitatori indirizzati quando fanno clic su tale pulsante.

5

Salvare e caricare il tuo file HTML.