August 25
Un buon metodo per la creazione di menu in HTML è contrassegnarli come liste non ordinate e poi fare ogni collegamento un elemento della lista. Questo è considerato una best practice, e il metodo è stato reso popolare nel 2002 dal l'articolo "Liste Taming" nella pubblicazione on-line, A List Apart. Da allora, i blogger di web design hanno inviato molti tutorial che mostrano i loro nuove tecniche per lo styling e la manipolazione di questi menu HTML di lista. È possibile creare un menù impressionante, anche, a partire da questo fondamento.
1 Digitare le voci di menu fuori ciascuno sulla propria linea. Avvolgere tag di ancoraggio attorno ad ogni voce di menu e quindi impostare l'attributo "href" per l'URL in cui quella voce di menu deve puntare.
<a href="firstpage.html"> Prima Pagina </a>
<a href="secondpage.html"> Seconda Pagina </a>
2 Avvolgere ogni voce di menu nei tag voce di elenco. I tag elemento della lista dovrebbe andare al di fuori dei tag di ancoraggio, rendendo così ogni collegamento un elemento in un elenco. Ecco il risultato:
<Li> <a href="firstpage.html"> Prima Pagina </a> </ li>
3 Inserire un tag lista non ordinata l'apertura di una nuova riga sopra la prima voce del menu. Aggiungere un tag di lista non ordinata la chiusura in una nuova riga dopo l'ultima voce di menu. Dare la lista non ordinata un attributo ID e impostare il valore di un nome significativo unico come "menu" o "topmenu." Ecco un esempio:
<Ul id = "MyMenu">
<Li> <a href="firstpage.html"> Prima Pagina </a> </ li>
<Li> <a href="secondpage.html"> Seconda Pagina </a> </ li>
</ Ul>
4 Aggiungere un sottomenu con l'aggiunta di una nuova lista non ordinata che contiene le voci di elenco avvolti in tag di ancoraggio tra una serie di tag <li>. La nuova lista non ordinata deve andare dopo il tag di ancoraggio di chiusura. Il codice sarà simile a questa:
<Ul id = "MyMenu">
<Li> <a href="firstpage.html"> Prima Pagina </a>
<ul>
& Lt; li> & lt; a href = "submenupage.html"> Menu di pagina & lt; / a> & lt; / li>
& Lt; / ul>
</ Li>
<Li> <a 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 vostro codice HTML. Aggiungere il codice CSS per il file CSS o tra i tag <style> per lo stile del menu. Usa il codice CSS prima di rimuovere proiettili e rientro. Ecco il codice:
ul {list-style: none; margin-left: 0; padding-left: 0;}
6 Inizia styling il vostro menu, rendendo tutti i tag di voci di elenco galleggiano a fianco di ogni altro. È quindi possibile aggiungere imbottitura ai tag di ancoraggio, ma si deve anche aggiungere "display: block" per far funzionare imbottitura. L'imbottitura rende i collegamenti più facili da cliccare. Ecco qualche esempio di codice:
li {float: left;}
li a {padding: 10px; blocco di visualizzazione;}
Dopo aver fatto questo molto, quindi è possibile aggiungere sfondi, rollover e anche menu a discesa pura-CSS per fare un ottimo menù per la pagina Web.