Nwlapcug.com


Come creare un Menu orizzontale tramite CSS



Quando il codice di una pagina Web in HTML e CSS, il metodo preferito è quello di creare una lista non ordinata in HTML e quindi applicare ad esso alcuni stili CSS. Non importa quanto complicato diventa un menu, la lista non ordinata rimane un efficace metodo per strutturare i collegamenti. Alcuni problemi di cross-browser richiedono particolare cura e conoscenza approfondita del codice CSS per rendere utilizzabile un menu orizzontale e tenerlo da rottura.

Istruzioni

1

Aprire il file HTML e aggiungere < ul > </UL > tag alla pagina Web e. Tra questi tag, aggiungere link avvolto in < li > e </li > Tag. Il tag < li > sta per "elemento" e viene utilizzato in elenchi puntati e numerati, ma molti sviluppatori anche usare questi come base per i loro menù. Ecco un esempio di una lista non ordinata, che è possibile utilizzare per creare un menu:

< ul >

< li >< un href="page1.html" > pagina 1 < /a >< / li >

< li >< un href="page2.html" > pagina 2 < /a >< / li >

</UL >

Il codice sopra riportato mostra due link in un elenco non ordinato. Maggior parte dei menu Visualizza link più di due. Aggiungere come molti link come ti piace, mantenendo mente che se si aggiungono troppe, il menu si romperà. Quante è possibile includere dipende dalla larghezza del vostro disegno, la larghezza del menu e della larghezza dello schermo dell'utente.

2

Rimuovere i punti elenco, margini e spaziatura interna dall'elenco non ordinato. Si esegue questa operazione impostando la proprietà CSS in un file CSS esterno o tra < style > e < / stile > Tag.

UL {list-style: none; margin-left: 0; padding-left: 0;}

Il codice sopra riportato rimuove formattazione dall'elenco non ordinato in modo è possibile disegnare come un menu.

3

Allineare tutte le voci di menu a sinistra di ogni altro impostando la proprietà di "galleggiare" a "sinistra" per ogni tag < li > nell'elenco non ordinato. Questo è come appare il codice CSS:

li {float: left;}

Questo codice ti dà una linea retta di link. Si dovrebbero stile i collegamenti stessi invece gli elementi dell'elenco, ma impedisce l'impostazione "galleggiante" per gli elementi di elenco anziché i collegamenti "stepping" in alcuni browser. "Stepping" è un errore dove viene visualizzato l'elenco di link come un insieme di passaggi invece di allineare in una linea retta orizzontale.

4

Aggiungere spaziatura interna per ogni link in CSS in questo modo:

li una {padding: 5px 10px; display: block;}

Nel codice precedente, ogni link ha un padding di cinque pixel in alto e in basso e 10 pixel a sinistra e a destra. L'applicazione di imbottitura per i link Crea una più grande zona cliccabile intorno al testo di ogni collegamento. Impostare "visualizzare: block;" per rendere il browser trattare i link come blocchi. Si noti che il selettore CSS qui è "li un" invece di "a" perché non si desidera che ogni collegamento nella pagina di guardare come i collegamenti nel menu.

Consigli & Avvertenze

  • Utilizzare i CSS per il tag < ul > per creare il fondo del menu, bordo e ombra di stile. Utilizzare CSS al tag < a > di stile le voci di menu. Il: hover pseudo-selettore viene utilizzato per creare stati di librarsi per voci di menu.
  • Quando si utilizza il codice CSS, esistono molti problemi di cross-browser. Poiché i menu richiedono uno stile complesso, è possibile verificare la pagina Web in più browser, incluse versioni precedenti di Internet Explorer.