Nwlapcug.com


Come creare un semplice CSS Navigation Menu codice

Menu di navigazione collegare le diverse pagine del tuo sito utilizzando i collegamenti ipertestuali. Bisogno solo di scrivere il markup di navigazione una volta e quindi copiarlo in ogni pagina. Convenzioni di progettazione Web richiedono che si scrive il contenuto del menu in HTML e mettere le istruzioni di formattazione in CSS. Utilizzando i CSS correttamente, potete ridurre l'ingombro nel vostro file HTML e può modificare facilmente la formattazione del tuo menu di navigazione in futuro sito ridisegna.

Istruzioni

1

Creare una lista non ordinata in HTML utilizzando l'elemento < ul > per definire l'elenco e l'elemento dell'elenco < li > per ogni elemento nell'elenco, con ogni elemento corrispondente per i collegamenti che si desidera venga visualizzato nel menu di navigazione. All'interno di ogni tag < li >, utilizzare il < a > elemento di ancoraggio per creare il collegamento ipertestuale effettivo.

2

Aggiungere il codice CSS per ignorare le impostazioni predefinite del browser Web per la formattazione l'aspetto degli elenchi. Utilizzare il selettore CSS "ul" per "elenco non ordinato" e creare un gruppo di dichiarazione. Per una soluzione di base predefinito, impostare la proprietà di "list-style-type" su "nessuno" e "imbottitura" e "margine" proprietà sia su "0". Se il tuo layout richiede valori diversi, o dichiarazioni aggiuntive, sostituire o aggiungerli come necessario.

3

Scegliere se si intende utilizzare una barra di menu verticale o orizzontale. Per una verticale, non è necessario aggiungere eventuali informazioni aggiuntive tranne se necessario per riflettere i requisiti di layout del tuo sito. Per un menu orizzontale, aggiungere una dichiarazione supplementare al vostro gruppo "ul", impostando la proprietà "Visualizza" in "inline". Creare un altro gruppo di dichiarazione utilizzando i CSS selector "li" per "voce di elenco." Qui, è possibile utilizzare la proprietà "padding" per creare la spaziatura interna sinistra e destra tra le voci di menu. In questo modo il testo delle voci di menu non verrà eseguito insieme. Ad esempio, un valore di "0px 10px 0px 10px" creerà 10 pixel di riempimento sull'estremità destra e sinistra della barra di navigazione e 20 pixel di riempimento tra voci di menu.

4

Isolare il tuo menu barra formattazione se si prevede di utilizzare altri elenchi non ordinati nel corpo del tuo sito Web. Effettuare questa operazione utilizzando un selettore CSS complesso come "intestazione ul" anziché solo "ul". Creare un contenitore HTML intorno all'area di intestazione della pagina utilizzando l'elemento < div > e assegnagli l'id "intestazione" per collegarlo con il selettore CSS. Se si esegue questa operazione, le istruzioni di formattazione verranno riguardano soltanto al "intestazione" delle pagine sul tuo sito e solo le parti dell'intestazione che sono un elenco non ordinato. Solo il menu di navigazione corrisponde a questa descrizione. Puoi anche fare la stessa cosa per altri gruppi di dichiarazione, ad esempio "intestazione li" invece di "li" per voci di elenco nel menu di navigazione.