Barre di spostamento sono uno degli elementi più critici su un sito Web. Siti con ampi contenuti possono essere difficili da attraversare. Una barra di navigazione ben strutturato è essenziale per rendere più facile per i visitatori di trovare contenuti pertinenti. Utilizzare le barre di spostamento per presentare tutte le pagine principali del tuo sito e categorie. Seguire alcune linee guida per creare un elenco a discesa di navigazione barra utilizzando HTML e CSS.
Istruzioni
Creazione di Menu in HTML
1
Creare il contenitore div che ospiterà la vostra barra di navigazione. Dare il vostro div navigazione un ID univoco, ad esempio "nav_menu":
< div id = "nav_menu" >
< / div >
2
Creare l'elenco non ordinato che avvolgerà il vostro singoli elementi. Dare questa lista non ordinata un ID, ad esempio "navigazione":
< div id = "nav_menu" >
< ul id = "navigazione" >
</UL >
< / div >
3
Creare elementi di elenco per ciascuna delle voci sulla vostra barra di navigazione. Avvolgere ogni elemento in un'apertura e il tag di chiusura "li", nonché un tag di ancoraggio per collegare ogni elemento a una pagina sul tuo sito Web:
< div id = "nav_menu" >
< ul id = "navigazione" >
< li >
<a href="testpage.html">
This is a test page
</a>
</li >
</UL >
< / div >
4
Creare un elenco non ordinato per le sotto-pagine. Inserire il nuovo elenco non ordinato direttamente prima del tag di chiusura </li > della pagina padre:
< div id = "nav_menu" >
< ul id = "navigazione" >
< li >
<a href="testpage.html">
This is a test page
</a>
<ul>
</ul>
</li >
</UL >
< / div >
5
Creare elementi di elenco per ciascuna delle sotto-pagine. Posizionare questi elementi di elenco all'interno della lista non ordinata creato nel passaggio 4:
< div id = "nav_menu" >
< ul id = "navigazione" >
<li>
<a href="testpage.html">
This is a test page
</a>
<ul>
<li>
<a href="subpage.html">
This is a sub page
</a>
</li>
</ul>
</li >
</UL >
< / div >
Creazione di CSS per controllare il tuo Menu
6
Aprire il foglio di stile CSS della tua pagina Web (CSS). Creare una nuova voce per il div contenitore è stato creato per ospitare il vostro menu di navigazione nella sezione 1, punto 1:
nav_menu () {
}
Dare il tuo blocco contenitore div visualizzare e corretti stili di larghezza. Scegliere una larghezza che si inserisce all'interno del contenitore principale della tua pagina. Ecco un esempio di un menu che è 900 pixel di larghezza:
nav_menu () {
display: block;
Larghezza: 900px;
}
7
Creare una voce per la vostra lista non ordinata dalla sezione 1, passaggio 2 nel vostro file CSS:
navigazione () {
}
Impostare il tuo elenco non ordinato dei margini a "0" e il suo stile di elenco su "none":
navigazione () {
list-style: none;
margin: 0;
}
8
Creare una voce per le voci dell'elenco principale dalla sezione 1, passaggio 3 nel vostro file CSS:
navigazione li {
}
Impostare le voci di elenco di galleggiare sinistra e hanno una larghezza fissa di tua scelta:
navigazione li {
float: left;
Larghezza: 200px;
}
9
Creare una voce per gli elenchi non ordinati secondari che conterrà le pagine sub:
navigazione li ul {
}
Impostare i valori di stile display ed elenco su "none":
navigazione li ul {
display: none;
list-style: none;
}
10
Elenchi non ordinati secondari e come dovrebbero comportarsi quando l'elemento di elenco padre è aleggiato, creare una voce per voi:
navigazione li:hover ul {
}
Impostare il valore di visualizzazione dell'elenco non ordinato secondario per "bloccare":
navigazione li:hover ul {
display: block;
}
11
Salvare i file e caricarli sul server.
Consigli & Avvertenze
- Si tratta di un menu a discesa molto essenziale. Aggiungere colori e stili aggiuntivi alla vostra barra di navigazione e il suo contenuto per complimentarmi con il tema del tuo sito Web esistente.
- Assicurarsi che la pagina Web ha un tipo DOC valido, che può impedire il vostro menu di funzionamento in alcune versioni di Internet Explorer.