I menu a discesa - noti anche come menu "suckerfish" - usano una combinazione di HTML e CSS (fogli di stile a cascata) per struttura e stile. La parte HTML di un menu a discesa è costituita da elenchi puntati e elenchi puntati nidificati. Dopo aver modellato la barra dei menu e i principali collegamenti di navigazione nei CSS, si definiscono gli elenchi puntati nidificati come sottomenu. Il selettore ": hover" nei CSS ti consente di modificare la proprietà di visualizzazione di un sottomenu nascosto in "blocco" per farlo riapparire.
Passaggio 1
Codifica il tuo menu in HTML usando "
"e"
"tag:
Link 1
Link 2
Link 3
Aggiungi un div clear-fix prima della fine dell'elenco. Aggiungerai uno stile alla classe "clearfix" per allungare lo sfondo del menu.
Passaggio 2
Aggiungi il tuo sottomenu come nuovo elenco non ordinato nidificato nei tag "
" del link principale:
Link 1
Link 2
Link 1
Link 2
Link 3
Link 3
Passaggio 3
Apri il foglio di stile e dai stile al tuo menu usando i CSS. Rimuovi sia i punti elenco che il rientro di sinistra: #menu {list-style: none; imbottitura: 0; } Nota che "#menu" corrisponde al nome ID del codice HTML di esempio.
Passaggio 4
Aggiungi un colore di sfondo alla barra dei menu: #menu {list-style: none; imbottitura: 0; colore di sfondo: blu scuro; }
Passaggio 5
Muovi le voci del menu a sinistra in modo che si allineino orizzontalmente sulla barra dei menu: #menu li {float: left; }
Passaggio 6
Modella i collegamenti che compongono le voci di menu. Aggiungi un'imbottitura ai collegamenti per allinearli verticalmente sulla barra dei menu, facilitando al contempo il clic e il passaggio del mouse. È necessario modificare la proprietà "display" in "block" per aggiungere il riempimento ai collegamenti: #menu li a {display: block; imbottitura: 8px 15px; text-align: center; colore bianco; peso carattere: grassetto; } Nota che in "padding" sono stati impostati due valori. Il primo valore è il riempimento verticale mentre il secondo ha l'effetto di riempimento orizzontale.
Passaggio 7
Modella il sottomenu e i relativi elementi. Devi prima posizionare il sottomenu. Rimuovere anche i proiettili e le imbottiture dai sottomenu: #menu ul {position: absolute; stile elenco: nessuno; imbottitura: 0; }
Passaggio 8
Rimuovere i float di sinistra dagli elementi nei sottomenu: #menu ul li {clear: left; }
Passaggio 9
Aggiungi "dsiplay: none" alla regola "#menu ul" per disattivare il sottomenu, poiché non desideri che appaia a meno che l'utente non passi sopra l'elemento padre. Rendi il menu di nuovo visualizzato usando questo codice: #menu li: hover ul {dipslay: block; }
Aggiungi la regola "clear fix" al tuo div: .clearfix {clear: both; }
Suggerimenti
Aggiungi l'evidenziazione alle voci del tuo menu quando l'utente ci passa sopra. Una regola di stile per cambiare il colore di sfondo di un link al passaggio del mouse appare come "#menu a: hover {}".
Al termine della creazione del menu utilizzando HTML e CSS, puoi aggiungere un plug-in jQuery per creare animazioni piacevoli per i menu a discesa.
Computer © www.354353.com