Els menús desplegables de les pàgines del lloc s’utilitzen per estalviar espai i proporcionar una presentació lògica de l’estructura d’un recurs web. Hi ha moltes maneres d'implementar aquest element, una de les més senzilles es mostra a continuació.
És necessari
Coneixements bàsics de llenguatges HTML i CSS
Instruccions
Pas 1
El codi HTML del menú utilitza elements de llista imbricats (UL i LI), dins dels quals es col·loquen enllaços a pàgines. No conté cap estructura complexa. La dinàmica s’implementa mitjançant CSS, el bloc de descripció del qual es col·loca directament al codi font de la pàgina. Tampoc no hi ha res d’especial, a més, el text conté algunes explicacions sobre la finalitat de determinats blocs d’estil.
Pas 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menú desplegable * {
font-family: Verdana;
mida de la lletra: 14 px;
} ul, li, a {
encoixinat: 0;
pantalla: bloc;
vora: 0;
marge: 0;
} ul {
vora: 1 px sòlid #AAA;
amplada: 150 px;
estil de llista: cap;
antecedents: #FFF;
} li {
color de fons: #AAA;
posició: relativa;
índex z: 9;
encoixinat: 1 px;
}
li.folder {background-color: #AAA;}
li.folder ul {
posició: absoluta;
superior: 5 px;
esquerra: 111px; / * per a navegadors IE * /
}
li.folder> ul {left: 140px;} / * per a altres navegadors * / a {
encoixinat: 2 px;
vora: 1 px sòlid #FFF;
decoració de text: cap;
amplada: 100%; / * per a navegadors IE * /
color: # 000;
font-pes: negreta;
}
li> a {width: auto;} / * per a altres navegadors * / li a {
amplada: 140 px;
pantalla: bloc;
} li a.submenu {
color de fons: groc;
} / * Enllaços * /
a: passeu el cursor {
color de la vora: gris;
color de fons: # FF0000;
color: negre;
}
li.folder a: hover {
color de fons: # FF0000;
} / * Carpetes * /
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. Pàgina
-
2. Carpeta
- 2.1 Pàg
-
2.2 Carpeta
- 2.2.1 Pàgina
- 2.2.2 Pàg
- 2.2.3 Pàgina
- 2.3 Pàg
-
3. Carpeta
- 3.1 Pàgina
- 3.2 Pàg
- 3.3 Pàg
- 4. Pàgina
Pas 3
Podeu afegir compatibilitat amb versions anteriors dels navegadors Internet Explorer a aquest codi: s’implementa mitjançant JavaScript (de Peter Nederlof). Heu de descarregar el fitxer amb el codi requerit, per exemple, des d’aquest enllaç - https://peterned.home.xs4all.nl/htc/csshover3.htc. S'ha de col·locar a la mateixa carpeta que la pàgina principal. I a la descripció dels estils de la pàgina principal, afegiu-hi un enllaç: es pot col·locar directament després de l'etiqueta d'estil d'obertura: / * per a navegadors antics IE *
cos {comportament: url ("csshover3.htc");}
