Menu a discesa - conosciuto anche come "suckerfish" menu - utilizzano una combinazione di HTML e CSS (Cascading Style Sheets) per struttura e stile. La parte HTML di un menu a discesa è costituito da elenchi puntati ed elenchi puntati nidificati. Dopo la barra dei menu e link di navigazione principale uno stile nel CSS, lo stile degli elenchi nidificati proiettile come sottomenu. Il ": hover" selettore CSS consente di modificare proprietà di visualizzazione di un sottomenu nascosti per "bloccare" farla ricomparire.

Istruzioni

1

Codice il tuo menu in HTML usando il "< ul >" e "< li >" Tag:

< ul id = "menu" >

< li >< un href="link1.html" > Link 1 < /a >< / li >

< li >< un href="link2.html" > Link 2 < /a >< / li >

< li >< un href="link3.html" > Link 3 < /a >< / li >

< div class = "clearfix" >< / div >

</UL >

Aggiungere un div clear-correzione prima della fine dell'elenco. Si aggiungerà uno stile alla classe "clearfix" per rendere lo sfondo del menu si estendono verso il basso.

2

Aggiungere il sottomenu come un nuovo elenco non ordinato nidificati all'interno del suo legame genitore "< li >" Tag:

< ul id = "menu" >

< li >< un href="link1.html" > Link 1 < /a >< / li >

< li >< un href="link2.html" > Link 2 < /a >

<ul>

<li><a href="link1.html">Link 1</a></li>

<li><a href="link2.html">Link 2</a></li>

<li><a href="link3.html">Link 3</a></li>

</li >

< li >< un href="link3.html" > Link 3 < /a >< / li >

</UL >

3

Aprire il foglio di stile, e stile il vostro menu utilizzando i CSS. Rimuovere i punti elenco e il rientro sinistro:

menu () {

list-style: none;

padding: 0;

}

Si noti che "#menu" corrisponde al nome di ID nell'esempio di codice HTML.

4

Aggiungere un colore di sfondo per la barra dei menu:

menu () {

list-style: none;

padding: 0;

colore di sfondo: blu scuro;

}

5

Le voci di menu a sinistra del galleggiante così siano allineati orizzontalmente sulla barra dei menu:

menu li {

float: left;

}

6

Stile i link che compongono le voci di menu. Aggiungere spaziatura interna per i collegamenti a metterli in fila in verticale sulla barra dei menu mentre li rende più semplice fare clic su e passa il mouse sopra. È necessario modificare la proprietà "display" per "bloccare" di aggiungere spaziatura al link:

menu li a {

display: block;

padding: 8px 15px;

text-align: center;

colore: bianco;

font-weight: bold;

Proprietà Text-decoration: none;

}

Si noti che in "imbottitura", sono stati impostati due valori. Il primo valore è riempimento verticale mentre la seconda spaziatura orizzontale di effetti.

7

Stile del sottomenu e i relativi elementi. È innanzitutto necessario posizionare il sottomenu. Rimuovere i proiettili e imbottitura dal sottomenu pure:

menu ul {

Posizione: assoluta;

list-style: none;

padding: 0;

}

8

Rimuovere i galleggianti sinistro dagli elementi nei sottomenù:

menu li ul {

chiaro: a sinistra;

}

9

Aggiungere "dsiplay: nessuno" alla regola "ul #menu" per disattivare il sottomenu, poiché non si desidera che venga visualizzata a meno che l'utente passa sopra il relativo elemento padre. Visualizzare il menu nuovamente utilizzando questo codice:

dal menu li:hover ul {

dipslay: blocco;

}

10

Aggiungere la regola "clear fix" per il vostro div:

.clearfix () {

chiaro: entrambi;

}

Consigli & Avvertenze

• Aggiungi l'evidenziazione per voci di menu quando l'utente passa sopra di loro. Assomiglia a una regola di stile per modificare il colore di sfondo di un link si librava-over "#menu un: hover {}".
• Una volta terminata la costruzione il vostro menu utilizzando HTML e CSS, è possibile aggiungere un plugin per jQuery per rendere piacevoli animazioni per gli elenchi a discesa.