Un metodo di navigazione è un requisito per qualsiasi sito Web con più di una pagina. Il modo più semplice per dare ai visitatori l'accesso a tutte le pagine sul tuo sito è quello di inserire il tag di ancoraggio all'interno di codice HTML di ogni pagina. Tuttavia, questo metodo può confondere i visitatori che si aspettano di trovare un menu di navigazione standard invece di un insieme di collegamenti casuali. Ponendo questi link in un bar è un processo semplice che dà al vostro sito un aspetto più professionale e riduce la potenziale confusione dei visitatori.

Istruzioni

1

Creare un foglio di stile per la vostra barra di navigazione. Nella sezione "head" del codice HTML, digitare:

< style type = "text/css" >

2

Assegnare il nome "nav" stile del bar e definire le caratteristiche della barra. In questo caso, il bar si estende nella parte superiore della finestra del browser intero. Le voci di menu vengono stampate in blu su uno sfondo grigio chiaro con bordi grigi scuri. Singole voci di menu diventa rosse quando il puntatore del mouse passa sopra di loro. Questa operazione viene eseguita con questo codice:

NAV () {

Larghezza: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
colore di sfondo: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }

NAV li {

float: left; }

NAV li a {

display: block;
padding: 8px 15px;
Proprietà Text-decoration: none;
font-weight: bold;
colore: #069;
Border-destra: 1px solid #ccc; }

NAV li un: hover {

colore: #c00;
colore di sfondo: #fff; }

3

Chiudere il foglio di stile con il tag di chiusura:

< / stile >

4

Creare un elenco non ordinato nella sezione del "corpo" del codice HTML. Assegnare lo stile "nav" alla lista con questa affermazione:

< ul id = "nav" >

5

Accedere all'elenco delle voci di menu. Definire ogni elemento come un link a una pagina sul tuo sito. In questo caso, includere collegamenti a circa, contatto, FAQ e pagine di casa con questo codice:

< li >< un href="about.html" > About Us < /a >< / li >
< li >< un href="contact.html" > contatto < /a >< / li >
< li >< un href="faq.html" > Domande frequenti < /a >< / li >
< li >< un href="index.html" > Home < /a >< / li >

Consigli & Avvertenze

• Questo foglio di stile consente di aggiungere e rimuovere voci di menu nella nella sezione del "corpo" del codice senza la necessità di modificare lo stile del foglio stesso. Alla fine del menu vengono aggiunti nuovi elementi e gli elementi esistenti vengono spostati a sinistra quando viene eliminata una selezione.