Come posso creare menu CSS a discesa?
Cascading Style Sheets (CSS) è un nome usato per descrivere il modo in cui un documento Hyper Text Markup Language (HTML) o Extensible Markup Language (XML) viene formattato. Può essere utilizzato per qualsiasi tipo di documento XML, ma viene spesso utilizzato con pagine Web scritte in HTML. I CSS possono essere utilizzati per creare menu a discesa su pagine Web. I menu CSS a discesa hanno un singolo elemento di testo mostrato fino a quando il visitatore non usa il mouse per passare il mouse sopra il menu, a quel punto viene mostrato l'intero elenco di elementi. Il menu viene creato utilizzando l'identificazione CSS e i tag di classe.
I menu a discesa CSS iniziano con il selettore ID. Questo selettore appare come #. È seguito dal nome dell'ID. Puoi assegnare un nome all'ID, ma dovrebbe essere descrittivo in modo che 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 usando il selettore di classe, che sembra un punto. La classe farà parte dell'elemento dell'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 parentesi graffe.
L'esempio seguente mostra l'intero codice CSS per il primo elemento nell'elenco:
# drop1 li.top {famiglia di caratteri: Verdana, Ginevra, san-serif;
dimensione carattere: 100%;
colore: # FF00FF;}
Successivamente, crea una classe per gli elementi che verranno nascosti sotto il primo elemento nel menu CSS. La classe descriverà l'elenco HTML non ordinato, che è designato con i caratteri "ul". La descrizione apparirà sostanzialmente identica alla voce di menu di livello superiore, con l'aggiunta delle parole "display: none # 59" all'inizio della descrizione. Ciò indica che gli elementi nell'elenco non ordinato verranno nascosti fino a quando il puntatore passa sopra il menu CSS a discesa.
Di seguito è riportato un esempio di questa parte del codice CSS:
# drop1 ul.link {
display: none # 59
famiglia di caratteri: Verdana, Ginevra, san-serif;
dimensione carattere: 100%;
colore: # FF00FF;}
Ti consigliamo di visualizzare il menu CSS a discesa sul resto del documento HMTL. Altrimenti, quando il visitatore passa sopra il menu, spingerà il resto del documento in basso nella pagina per fare spazio all'elenco. Impostando l'elemento position su assoluto, lo farà.
Il codice per impostare la posizione è:
# Drop1 {position: absolute;}
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 utilizzando gli elementi "div", "id", "class", "li" e "ul". Il tag "div" separa la parte del menu del documento. Digitare <div id = "drop1"> per creare la parte del menu a discesa. Quindi avviare l'elenco non ordinato utilizzando l'elemento "ul" HTML.
Aggiungi la classe superiore al primo elemento dell'elenco e la classe di collegamento per il resto degli elementi. Il codice HTML dovrebbe essere simile a:
<div id = "drop1">
<li class = "top"> Articolo principale </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
</ul> </div>
Quando si apre il documento in un browser Web, il menu CSS a discesa verrà visualizzato come un singolo elemento nella pagina. Quando si sposta il mouse sull'elemento in alto, verrà visualizzato il resto del menu. Il resto del testo sulla pagina non si sposterà, ma una parte verrà nascosta dal menu.