Un bel menu a tendina può essere creato non solo in JavaScript, ma anche utilizzando tag HTML standard. Questo metodo di creazione di un menu a discesa sarà utile per coloro che stanno appena iniziando i primi passi nella creazione di siti e desiderano semplificare il lavoro di creazione dei menu sulle pagine.
Istruzioni
Passo 1
Nel codice HTML, un tale menu è un elenco non ordinato con elenchi nidificati all'interno. Per iniziare, crea un file style.css e copia lì il seguente codice CSS per lo stile e la formattazione del menu:
#nav, #nav ul {
stile elenco: nessuno;
margine: 0;
imbottitura: 0;
bordo: 1px solido # 000;
sfondo: # 515151;
galleggiante: sinistro;
larghezza: 100%;
}
#nav li {
galleggiante: sinistro;
posizione: relativa;
colore di sfondo: # 003366;
back / ground: nessuno;
}
#nav li ul {
display: nessuno;
posizione: assoluta;
colore di sfondo: # 003366;
imbottitura: 8px 0;
larghezza: 138px;
}
Passo 2
Ora dobbiamo aggiungere qualche decorazione alle voci del menu. Definisci la larghezza e l'altezza per loro, rimuovi le linee di sottolineatura, imposta una larghezza chiara per ogni collegamento e specifica i colori di sfondo desiderati.
Passaggio 3
Per tutte queste modifiche, aggiungi il seguente codice al file:
#nav a {
colore: #fff;
decorazione del testo: nessuna;
blocco di visualizzazione;
larghezza: 120px;
imbottitura: 4px 10px;
background-color: # 003366 repeat-y a destra;
}
#nav a: hover {
colore: # 000;
colore di sfondo: # 0033FF;
}
#nav li: hover {
colore di sfondo: # 333333;
}
Quindi aggiungi il seguente pezzo di codice per finalizzare il menu:
#nav li: hover li ul {
display: nessuno;
larghezza: 138px;
in alto: -9px;
sinistra: 133px;
}
#nav li: hover li: hover ul {
blocco di visualizzazione;
}
Passaggio 4
Nella versione HTML, l'elenco generale dei menu non ordinato ha questo aspetto: sulla base viene creato il menu, menzionato nell'articolo.
- Casa
-
Catalogare
-
Tutti i prodotti
- Per data
- Produttori
- Altro
-
