Come posso creare menu CSS a discesa?
fogli di stile a cascata (CSS) è un nome usato per descrivere il modo in cui un documento Hyper Text Markup Language (HTML) o Extensible Markup Language (XML) è formattato. Può essere utilizzato per qualsiasi tipo di documento XML, ma viene spesso utilizzato con le pagine Web scritte in HTML. I CSS possono essere utilizzati per creare menu a discesa su pagine Web. I menu CSS a rilascio hanno un singolo elemento di testo mostrato fino a quando il visitatore non utilizza il mouse per passare il mouse sul menu, a quel punto viene mostrato l'intero elenco di elementi. Il menu viene creato utilizzando i tag CSS e i tag di classe.
I menu CSS a discesa iniziano con il selettore ID. Questo selettore sembra #. È seguito dal nome dell'ID. Puoi nominare l'ID qualsiasi cosa, ma dovrebbe essere descrittivo in modo che gli altri possano leggere il tuo codice. Ad esempio, un menu a discesa può utilizzare il codice #drop1.
Crea la classe per il primo elemento nel menu CSS a discesa utilizzando il selettore della classe, che sembra un periodo. La classe farà parte dell'elemento elenco HTML. L'elemento elenco è designato dai caratteri "Li". Crea la classe di livello superiore digitando "Li.top". La descrizione della classe è contenuta tra due parenti ricci.
L'esempio seguente mostra l'intero codice CSS per il primo elemento nell'elenco:
#drop1 li.top {Font-Family: Verdana, Ginevra, san-serif;
Font-size: 100%;
Colore: #ff00ff;}
Successivamente, crea una classe per gli elementi che saranno nascosti sotto il primo elemento nel menu CSS. La classe descriverà l'elenco non ordinato HTML, che è designato con i personaggi "UL". La descrizione sembrerà essenzialmente la stessa della voce di menu di livello superiore, con l'aggiunta delle parole "Visualizza: nessuno#59" all'inizio della descrizione. Ciò indica che gli elementi nell'elenco non ordinato saranno nascosti fino a quando il puntatore si libra sul menu CSS a discesa.
quanto segueè un esempio di questa parte del codice CSS:
#drop1 ul.link {
Display: nessuno#59
Font-Family: Verdana, Ginevra, San-Serif;
Font-size: 100%;
Colore: #ff00ff;}
Ti consigliamo di comparire il menu CSS a discesa per il resto del documento HMTL. Altrimenti, quando il visitatore si libra sul menu, spingerà il resto del documento lungo la pagina per fare spazio all'elenco. L'impostazione dell'elemento di posizione su assoluto, lo farà.
Il codice per impostare la posizione è:
#drop1 {posizione: assoluto;}
Questo è tutto ciò che è necessario per la parte CSS del menu a discesa. Il resto del menu CSS a discesa viene creato nel documento HTML usando elementi "Div", "Id", "Classe", "Li" e "UL". Il tag "Div" separa la parte del menu del documento. Tipo
Aggiungi la classe superiore al primo elemento elenco e la classe di collegamento per il resto degli elementi. Il codice HTML dovrebbe apparire simile a:
Quando si apri il documento in un browser Web, il menu a discesa CSS apparirà come un singolo elemento nella pagina. Quando si sposta il mouse sopra l'elemento in alto, apparirà il resto del menu. Il resto del testo sulla pagina non si sposterà, ma una parte sarà nascosta dal menu.