September 22
Prima dello sviluppo di Cascading Style Sheets, Web designer hanno utilizzato una combinazione di Hypertext Markup Language e JavaScript per creare menu a discesa. Per circa un decennio, "<select>" tag sono stati usati per aggiungere menu di navigazione a siti, ma la maggior parte i progettisti ora utilizzano l'UL, o lista non ordinata, elemento. La maggior parte degli elementi UL usano il testo, ma si possono combinare HTML e CSS per creare un menu a discesa che utilizza immagini, invece.
1 Inserire la "<ul>" e "</ ul>" tag tra il "<body>" e "</ body>" tag nel documento HTML:
<Body>
<Ul>
</ Ul>
</ Body>
2 Inserisci "<li>" e "<li>" tra i "<ul>" tag per creare il menu principale. Inserire il tag "<img>" tra i "<li>" tag.
<Ul>
<Li> <img src = "URL" alt = "header una"> </ li>
<Li> <img src = "URL" alt = "header b"> </ li>
</ Ul>
Sostituire "URL" con l'indirizzo completo che collega alle immagini dei menu. Utilizzare la stessa formattazione, "<li> <img> </ li>", per aggiungere elementi aggiuntivi al menu. Sostituire il testo nel campo "alt" con una descrizione per ogni immagine.
3 Inserire la "<ul>" e "<li>" tag tra i "<li>" tag esistenti per aggiungere sottomenu. Per esempio:
<Ul>
<Li> <img src = "URL" alt = "header di un">
<Ul>
<Li> <img src = "URL" alt = "sottovoce un"> </ li>
</ Ul>
</ Li>
<Li> <img src = "URL" alt = "header b">
<Ul>
<Li> <img src = "URL" alt = "sottovoce b"> </ li>
<Li> <img src = "URL" alt = "sottovoce c"> </ li>
</ Ul>
</ Li>
</ Ul>
Inserire le immagini corrette per i sotto-menu utilizzando la stessa procedura utilizzata per il menu principale. Sostituire i campi "alt" con le descrizioni delle immagini '.
4 Aggiungere il tag "<a>" per ogni "<li>" elemento per collegare le voci di menu ad una pagina specifica sul sito web. Per esempio:
<Li> <a href="page.html"> <img src = "URL" alt = "sottovoce un"> </a> </ li>
Sostituire "page.html" con l'indirizzo di collegamento al documento Web corretta.
5 Inserire la "<style>" tag per l'intestazione del documento:
<Head>
<Style>
</ Style>
</ Head>
6 Aggiungere il seguente tra le "<style>" tag per formattare i "<ul>" e "<li>" tag:
li {
list-style-type: none;
}
ul li {
float: left;
Larghezza: #px;
}
Sostituire "#" con la larghezza dell'immagine più grande in pixel.
7 Inserire il seguente codice tra i "<style>" tag, seguendo l'elemento "ul li", per convertire il menu per un menu a discesa:
ul li ul {
visibility: hidden;
}
ul li: hover {ul
Visibilità: visibile;
display: inline;
}