Rollover aiutare i visitatori a siti Web di sapere quando un elemento è selezionabile. Il tipo più semplice di rollover è un colore evidenziato su un link di testo, ma rollover comunemente includono modifiche di sfondo e immagine. Su un ribaltamento nav (o navigazione) bar, una riga di link offre opzioni di navigazione ai visitatori e le modifiche di sfondo di ogni collegamento quando l'utente sposta il puntatore del mouse sopra di loro. Questo effetto è possibile con i CSS da solo, utilizzando la ": hover" pseudo-classe per impostare l'effetto di rollover.
Istruzioni
1
Creare un nuovo elenco non ordinato all'interno della tua pagina Web, inserendo il codice dove si desidera che la barra di navigazione a comparire. Rendere ogni spostamento di collegamento di un elemento all'interno dell'elenco:
< ul classe = "nav" >
< li >< un href="index.html" > Home < /a >< / li >
< li >< un href="about.html" > About Us < /a >< / li >
< li >< un href="ourwork.html" > Our Work < /a >< / li >
< li >< un href="contact.html" > Scrivici < /a >< / li >
</UL >
Dare il tag di elenco non ordinato un nome di classe, come mostrato sopra. "Nav" funziona bene perché è descrittivo e facile da ricordare. Utilizzando una classe vi permetterà di scrivere codice CSS che è riutilizzabile su più elenchi non ordinati, rendendo possibile più nav bar su una singola pagina.
2
Fare un nuovo file vuoto e salvarlo come "nav.css." È necessario salvare questo file nella stessa cartella come pagina Web. Avviare il foglio di stile da stripping proiettili e imbottitura dall'elenco non ordinato:
{. NAV
list-style: none;
padding-left: 0;
}
La regola di stile sopra "Seleziona" qualsiasi elemento HTML che contiene il nome della classe "nav".
3
Scrivere una regola di stile che seleziona tutti gli elementi di elenco all'interno di qualsiasi elemento con un nome di classe "NAV." All'interno di tale regola di stile, impostare la proprietà di "float" a "sinistra":
. NAV li {
float: left;
}
Questa regola prende ogni elemento nell'elenco non ordinato e carri allegorici a sinistra. L'effetto è una fila orizzontale di collegamenti anziché la lista verticale creato dal tag "< ul >". Non è possibile aggiungere galleggianti per i collegamenti stessi perché questo provoca un effetto scala-simile che si romperà la barra di navigazione.
4
Scrivere una regola di stile per i collegamenti all'interno della barra nav. Il tag per selezionare qui è "< a >" o tag di "ancoraggio". All'interno di questa regola, impostare i colori di sfondo e primo piano, rimuovere le sottolineature di collegamento e lo stile del tipo di carattere come desiderato. Aggiungere spaziatura interna per creare spazio intorno ogni link:
. menu a {
sfondo: blu scuro;
colore: bianco;
font-weight: bold;
Proprietà Text-decoration: none;
padding: 5px 20px;
}
In questo esempio, il valore di "5px" della proprietà «riempimento» imposta la spaziatura interna sopra e sotto ogni link su cinque pixel. Il valore di "20px" imposta la spaziatura interna a 20 pixel a sinistra e a destra di ogni link.
5
Creare una nuova regola per i link, ma aggiungere ": hover" per la "a" per definire lo stato hover:
. menu un: hover {
Priorità bassa: darkred;
}
Lo stato "hover" è lo stesso come un rollover. Quando l'utente passa il puntatore del mouse sopra un link, lo sfondo cambia a seconda di come hai scritto la regola di stile. Nel caso di questo esempio, lo sfondo sarebbe girare rosso scuro. È inoltre possibile impostare altre proprietà utilizzando questa regola, ad esempio "colore" o "immagine di sfondo."