Un buon metodo per la creazione di menu in HTML è per contrassegnarli come elenchi non ordinati e poi fare ogni link una voce di elenco. Questo è considerato una best practice, e il metodo è stato reso popolare nel 2002 dall'articolo "Taming Lists" nella pubblicazione online, A List Apart. Da allora, Web design blogger hanno pubblicato molti tutorial mostrando il loro nuove tecniche per lo styling e la manipolazione di questi menu HTML basato su elenco. È possibile creare un menù straordinario, troppo, a partire da questo fondamento.

Istruzioni

1

Digitare le voci di menu fuori ognuno sulla propria riga. Avvolgere il tag di ancoraggio intorno a ciascuna voce di menu e quindi impostare l'attributo "href" all'URL a cui dovrà puntare quella voce di menu.

< un href="firstpage.html" > prima pagina < /a >

< un href="secondpage.html" > seconda pagina < /a >

2

Avvolgere ogni voce di menu in tag di elemento di elenco. I tag di elemento di elenco dovrebbero andare di fuori dei tag di ancoraggio, rendendo ogni collegamento di un elemento in un elenco. Ecco il risultato:

< li >< un href="firstpage.html" > prima pagina < /a >< / li >

3

Posto un elenco non ordinato di apertura tag su una nuova riga sopra la prima voce di menu. Aggiungere una chiusura non ordinata tag list in una nuova riga dopo l'ultima voce di menu. Dare l'elenco non ordinato un attributo ID e impostarne il valore su un nome univoco e significativo come "menu" o "topmenu." Ecco un esempio:

< ul id = "mymenu" >

< li >< un href="firstpage.html" > prima pagina < /a >< / li >

< li >< un href="secondpage.html" > seconda pagina < /a >< / li >

</UL >

4

Aggiungere un sottomenu con l'aggiunta di un nuovo elenco non ordinato contenente gli elementi dell'elenco avvolti nel tag di ancoraggio tra un insieme di tag < li >. Il nuovo elenco non ordinato deve andare dopo la chiusura tag di ancoraggio. Il codice sarà simile a questo:

< ul id = "mymenu" >

< li >< un href="firstpage.html" > prima pagina < /a >

<ul>

<li><a href="submenupage.html">Sub-Menu Page</a></li>

</ul>

</li >

< li >< un href="secondpage.html" > seconda pagina < /a >< / li >

</UL >

5

Aprire il file CSS esterno per il tuo sito o trovare i tag < style > verso la parte superiore del tuo codice HTML. Aggiungere il codice CSS nel file CSS o tra i tag < style > stile del menu. Utilizzare codice CSS prima di rimuovere i punti elenco e rientro. Ecco il codice:

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

6

Avviare lo styling il vostro menu facendo tutti elenco elemento tag galleggiante a sinistra della vicenda. È quindi possibile aggiungere imbottitura per i tag di ancoraggio, ma è necessario anche aggiungere "visualizzare: blocco" per rendere l'imbottitura lavoro. L'imbottitura rende più semplice fare clic i collegamenti. Ecco alcuni esempio di codice:

li {float: left;}

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

Dopo aver fatto questo molto, è quindi possibile aggiungere sfondi, rollover e anche puro CSS menu a discesa per fare un ottimo menu per la tua pagina Web.

Consigli & Avvertenze

• Sempre eseguire il backup i file HTML e CSS durante la modifica.