I menu a discesa nelle pagine del sito vengono utilizzati per risparmiare spazio e fornire una presentazione logica della struttura di una risorsa web. Esistono molti modi per implementare questo elemento, uno dei più semplici è riportato di seguito.
È necessario
Conoscenza di base dei linguaggi HTML e CSS
Istruzioni
Passo 1
Il codice HTML del menu utilizza elementi di elenco nidificati (UL e LI), all'interno dei quali vengono inseriti i collegamenti alle pagine. Non contiene strutture complesse. La dinamica è implementata tramite CSS, il cui blocco di descrizione è posto direttamente nel codice sorgente della pagina. Non c'è niente di speciale neanche in questo, inoltre, il testo contiene alcune spiegazioni sullo scopo di alcuni blocchi di stile.
Passo 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu a discesa * {
font-famiglia: Verdana;
dimensione del carattere: 14px;
} ul, li, a {
imbottitura: 0;
blocco di visualizzazione;
bordo: 0;
margine: 0;
} ul {
bordo: 1px solido #AAA;
larghezza: 150px;
stile elenco: nessuno;
sfondo: #FFF;
} li {
colore di sfondo: #AAA;
posizione: relativa;
indice z: 9;
imbottitura: 1px;
}
li.folder {colore di sfondo: #AAA;}
li.cartella ul {
posizione: assoluta;
in alto: 5px;
sinistra: 111px; / * per browser Internet Explorer * /
}
li.folder> ul {sinistra: 140px;} / * per altri browser * / a {
imbottitura: 2px;
bordo: 1px solido #FFF;
decorazione del testo: nessuna;
larghezza: 100%; / * per browser IE * /
colore: # 000;
font-weight: grassetto;
}
li> a {width: auto;} / * per altri browser * / li a {
larghezza: 140px;
blocco di visualizzazione;
} li a.sottomenu {
colore di fondo: giallo;
} / * Collegamenti * /
a: hover {
colore del bordo: grigio;
colore di sfondo: # FF0000;
colore nero;
}
li.folder a: hover {
colore di sfondo: # FF0000;
} / * Cartelle * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Pagina
-
2. Cartella
- 2.1 Pagina
-
2.2 Cartella
- 2.2.1 Pagina
- 2.2.2 Pagina
- 2.2.3 Pagina
- 2.3 Pagina
-
3. Cartella
- 3.1 Pagina
- 3.2 Pagina
- 3.3 Pagina
- 4. Pagina
Passaggio 3
Puoi aggiungere il supporto per le versioni precedenti dei browser Internet Explorer a questo codice: è implementato utilizzando JavaScript (di Peter Nederlof). Devi scaricare il file con il codice richiesto, ad esempio, da questo link - https://peterned.home.xs4all.nl/htc/csshover3.htc. Deve essere posizionato nella stessa cartella della pagina principale. E nella descrizione degli stili della pagina principale, aggiungi un collegamento ad essa: può essere posizionato direttamente dopo il tag dello stile di apertura: / * per i vecchi browser IE *
corpo {comportamento: url ("csshover3.htc");}
