December 22
noto anche come menu "Suckerfish" - - menu-giù goccia utilizzare una combinazione di HTML e CSS (Cascading Style Sheets) per la struttura e lo stile. La parte HTML di un menu a discesa è costituito da elenchi puntati e elenchi puntati nidificati. Dopo aver acconciare la barra dei menu e principali link di navigazione in CSS, è lo stile elenchi puntati nidificate come sottomenu. Il ": hover" Selettore in CSS consente di modificare proprietà di visualizzazione di un sottomenu nascosta per "blocco" per farlo riapparire.
1 Codice vostro menu in HTML utilizzando il "<ul>" e "<li>" tag:
<Ul id = "menu">
<Li> <a href="link1.html"> collegamento 1 </a> </ li>
<Li> <a href="link2.html"> Link 2 </a> </ li>
<Li> <a href="link3.html"> Link 3 </a> </ li>
<Div class = "clearfix"> </ div>
</ Ul>
Aggiungere un div chiaro-fix prima della fine della lista. Si aggiungerà uno stile alla classe "clearfix" per rendere lo sfondo del menu di allungare verso il basso.
2 Aggiungi il tuo sottomenu come una nuova lista non ordinata nidificato all'interno di "<li>" tag del suo legame genitore:
<Ul id = "menu">
<Li> <a href="link1.html"> collegamento 1 </a> </ li>
<Li> <a href="link2.html"> Link 2 </a>
<ul>
& Lt; li> & lt; a href = "link1.html"> link 1 & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "link2.html"> Link 2 & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "link3.html"> Link 3 & lt; / a> & lt; / li>
</ Li>
<Li> <a href="link3.html"> Link 3 </a> </ li>
</ Ul>
3 Aprire il foglio di stile, lo stile e il vostro menu utilizzando i CSS. Rimuovere entrambi i proiettili e sinistra-trattino:
Menu {
list-style: none;
padding: 0;
}
Si noti che "#menu" corrisponde al nome ID del codice di esempio HTML.
4 Aggiungere un colore di sfondo per la tua barra dei menu:
Menu {
list-style: none;
padding: 0;
background-color: blu scuro;
}
5 Float le voci di menu a sinistra in modo da allinearsi orizzontalmente sulla barra dei menu:
menù li {
float: left;
}
6 Stile i link che compongono voci di menu. Aggiungere imbottitura per i link per allinearli verticalmente sulla barra dei menu, mentre rendendoli più facili da fare clic su e posiziona il mouse sopra. È necessario modificare la proprietà "display" a "blocco" per aggiungere padding ai collegamenti:
menu di li a {
blocco di visualizzazione;
padding: 15px 8px;
text-align: center;
colore bianco;
font-weight: bold;
text-decoration: none;
}
Si noti che in "imbottitura", sono stati impostati due valori. Il primo valore è padding verticale mentre il secondo effetti padding orizzontale.
7 Stile sottomenu e dei suoi elementi. Innanzitutto è necessario posizionare il sottomenu. Rimuovere i proiettili e le imbottiture dal sottomenu pure:
menù ul {
position: absolute;
list-style: none;
padding: 0;
}
8 Rimuovere i carri di sinistro da elementi nel sottomenu:
menù ul li {
clear: left;
}
9 Aggiungere "dsiplay: none" alla regola "#menu ul" per spegnere il sottomenu, dal momento che non si vuole che appaia meno che l'utente passa sopra il suo elemento principale. Rendere il menu appare ancora una volta utilizzando questo codice:
menù li: hover {ul
dipslay: block;
}
10 Aggiungere la regola "chiara fix" al tuo div:
.clearfix {
clear: both;
}