HTML fornisce la struttura per i dati all'interno di pagine Web. Seguendo questo principio, la maggior parte degli sviluppatori Web creare barre di navigazione a partire con elenchi non ordinati. Un elenco non ordinato crea un elenco puntato per impostazione predefinita in tutti i browser Web, ma è possibile utilizzare codice di Cascading Style Sheets (CSS) più tardi a spogliare i proiettili e le voci di elenco di stile come necessario.

La lista non ordinata

Ecco il codice per una lista non ordinata che diventerà una barra di navigazione:

< ul >

< li >< un href="somepage.html" > alcuni pagina < /a >< / li >

< li >< un href="anotherpage.html" > un'altra pagina < /a >< / li >

</UL >

Si noti che ogni elemento nell'elenco..--creato dal tag "< ul >" - è racchiuso in una coppia di tag di elemento o "< li >" elenco. Dal momento che i visitatori del sito è necessario fare clic su elementi nell'elenco, è necessario utilizzare il tag di ancoraggio per creare collegamenti fuori di ogni elemento dell'elenco.

Rimuovere uno stile predefinito

Prima è possibile lo stile di una lista non ordinata in una barra di navigazione, si devono striscia stili predefiniti assente. Se si utilizza un foglio di stile di reset, come quello creato da Eric Meyers, è possibile ignorare questo passaggio. Spogliarello stile predefinito distanza richiede l'impostazione della proprietà "list-style" su "none" per rimuovere i punti elenco, e quindi è necessario rimuovere il margine sinistro e la spaziatura interna a sinistra. Il codice CSS è simile al seguente:

UL {

list-style: none;

margin-left: 0;

padding-left: 0;

}

Rendere l'elenco orizzontale

Anche se alcuni siti Web utilizzano sidebar menu per la navigazione, l'orientamento della barra di navigazione più comune è orizzontale, si estendono su parte superiore del sito Web. Si può fare il vostro elenco non ordinato orizzontale impostando gli elementi dell'elenco di "galleggiante: sinistra" come questo:

li {

float: left;

}

Link di navigazione

Dando ogni link è un tipo di visualizzazione di "blocco" è il modo migliore per rendere la vostra barra di navigazione facile da usare. Senza "display: block", non è possibile aggiungere imbottitura ai collegamenti di aggiungere spazio selezionabile intorno al loro testo. L'imbottitura rende anche barra voce evidenziando più facile navigazione. Questo è un esempio di codice CSS per i collegamenti in una barra di navigazione:

li a {

display: block;

padding: 10px;

background-color: #555555;

colore: #ffffff;

Proprietà Text-decoration: none;

}

li a: hover {

background-color: #333333;

}

Il codice precedente aggiunge 10 pixel di riempimento intorno ogni collegamento. I collegamenti fatti un colore di sfondo di grigio medio e un colore del testo bianco. "Text-decoration: none" Disattiva la sottolineatura del collegamento. Il "li un: hover" regole di stile del selettore rendono così quando l'utente passa il puntatore del mouse sopra un link, lo sfondo diventa grigio scuro.

Styling la barra stessa

Si può dare la barra di navigazione in qualsiasi stile desiderato, con sfondi, sfumature, ombre e angoli arrotondati. Assicurarsi che il vostro stile funziona in tutti i browser, a meno che non va bene sul progetto particolare per consentire la barra per ridurre normalmente. Ad esempio, ecco il codice per un bar con uno sfondo nero e angoli arrotondati:

UL {

sfondo: #000000;

raggio bordo: 20px;

}

La proprietà "border-radius" non funziona in Internet Explorer 8 e di seguito senza l'uso di un polyfill come "CSS3Pie." Un foglio di stile separato avvolto in commenti condizionali, insieme alle immagini di angolo, è possibile creare un fallback per angolo arrotondato pure.