Barra di navigazione CSS
Demo: barre di navigazione
Barre di navigazione
Avere una navigazione facile da usare è importante per qualsiasi sito web.
Con i CSS puoi trasformare noiosi menu HTML in belle barre di navigazione.
Barra di navigazione = Elenco di collegamenti
Una barra di navigazione necessita di HTML standard come base.
Nei nostri esempi costruiremo la barra di navigazione da un elenco HTML standard.
Una barra di navigazione è fondamentalmente un elenco di collegamenti, quindi l'utilizzo degli elementi <ul> e <li> ha perfettamente senso:
Esempio
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Ora rimuoviamo i punti elenco, i margini e il riempimento dall'elenco:
Esempio
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Esempio spiegato:
list-style-type: none;- Rimuove i proiettili. Una barra di navigazione non necessita di indicatori di elenco- Imposta
margin: 0;epadding: 0;per rimuovere le impostazioni predefinite del browser
Il codice nell'esempio sopra è il codice standard utilizzato nelle barre di navigazione sia verticali che orizzontali, di cui imparerai di più nei prossimi capitoli.