Una barra di navigazione aiuta i visitatori accedere a tutte le aree del tuo sito Web o blog. Se si desidera creare una barra di navigazione orizzontale, anziché verticale, è possibile farlo creando un elenco base di HTML (Hypertext Markup Language) e applicando gli stili CSS (Cascading Style Sheets) per il codice. Questo elenco non richiede nessun script speciali e verrà visualizzati in qualsiasi browser che supporta i CSS, compresi browser per dispositivi mobili.

Istruzioni

1

Inserire il codice seguente dopo il tag di apertura "< head >" nel documento HTML e prima del tag di chiusura < / head >.

< style type = "text/css" >

Navbar li

{

display: inline;

margin: 5px 0;

list-style-type: none;

}

Navbar un

{

Proprietà Text-decoration: none;

}

< / stile >

2

Incollare il codice seguente dopo il tag "< body >" nel vostro elemento HTML per creare l'elenco che sarà la base della barra di navigazione.

< ul id = "navbar" >

< li >< un href = "URL1" > Link 1 < /a >< / li >

< li >< un href = "URL1" > Link 2 < /a >< / li >

< li >< un href = "URL1" > Link 3 < /a >< / li >

< li >< un href = "URL1" > Link 4 < /a >< / li >

</UL >

3

Modificare i valori per "URL1," "URL2" e così via per i collegamenti effettivi dove vuoi indirizzare i tuoi visitatori. Modificare il testo del collegamento... "Link1" e "Link2" tra gli altri..--a un testo descrittivo che informerà i visitatori dove conducono i link. È possibile aggiungere testo senza link aggiungendo una riga simile a questa nella tua lista:

< li > il testo va qui </li >

4

Personalizzare la barra di navigazione con l'aggiunta di stili nel CSS nella sezione head del documento. Ad esempio, è possibile aggiungere un colore di sfondo di base (nero), colore del carattere (rosso) e bordo (grigio) con le seguenti modifiche:

Navbar li

{

display: inline;

margin: 5px 0;

list-style-type: none;

padding: 5px;

border: 1px solid #808080;

background: #000;

colore: #FF0000;

}

Navbar un

{

Proprietà Text-decoration: none;

colore: #FF0000;

}

5

Salvare il documento HTML/Web.

Consigli & Avvertenze

• Se l'elenco è più grande dello schermo del vostro ospite, andrà a capo alla riga successiva.
• È possibile applicare praticamente qualsiasi proprietà CSS alla tua lista, singoli elementi di elenco o test di collegamento contenuto.
• Nomi di collegamento dovrebbero spiegare chiaramente nella pagina di destinazione.
• Se si dispone di un file CSS separato, inserire la navigazione CSS file e salvarlo. Aggiungere il tuo elenco HTML al file pagina Web/HTML.