Come fare un menu immagine a discesa CSS

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.

istruzione

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;
}

Consigli e avvertenze

  • Se non si desidera che le voci di menu in alto per creare un collegamento a un'altra pagina sul sito, inserire "#" in campo "href", invece.