Los menús desplegables en las páginas del sitio se utilizan para ahorrar espacio y proporcionar una presentación lógica de la estructura de un recurso web. Hay muchas formas de implementar este elemento, una de las más sencillas se da a continuación.
Es necesario
Conocimientos básicos de lenguajes HTML y CSS
Instrucciones
Paso 1
El código HTML del menú utiliza elementos de lista anidados (UL y LI), dentro de los cuales se colocan los enlaces a las páginas. No contiene estructuras complejas. La dinámica se implementa mediante CSS, cuyo bloque de descripción se coloca directamente en el código fuente de la página. Tampoco tiene nada de especial, además, el texto contiene algunas explicaciones del propósito de ciertos bloques de estilo.
Paso 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menú desplegable * {
familia de fuentes: Verdana;
tamaño de fuente: 14px;
} ul, li, a {
acolchado: 0;
bloqueo de pantalla;
borde: 0;
margen: 0;
} ul {
borde: 1px sólido #AAA;
ancho: 150px;
estilo de lista: ninguno;
fondo: #FFF;
} li {
color de fondo: #AAA;
posición: relativa;
índice z: 9;
relleno: 1px;
}
li.folder {color de fondo: #AAA;}
li.folder ul {
posición: absoluta;
superior: 5px;
izquierda: 111px; / * para navegadores IE * /
}
li.folder> ul {left: 140px;} / * para otros navegadores * / a {
relleno: 2px;
borde: 1px sólido #FFF;
decoración de texto: ninguna;
ancho: 100%; / * para navegadores IE * /
color: # 000;
font-weight: negrita;
}
li> a {width: auto;} / * para otros navegadores * / li a {
ancho: 140px;
bloqueo de pantalla;
} li a.submenu {
color de fondo: amarillo;
} / * Enlaces * /
a: hover {
color del borde: gris;
color de fondo: # FF0000;
de color negro;
}
li.folder a: hover {
color de fondo: # FF0000;
} / * Carpetas * /
ul ul, li: hover ul ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1 pagina
-
2. Carpeta
- 2.1 Página
-
2.2 Carpeta
- 2.2.1 Página
- 2.2.2 Página
- 2.2.3 Página
- 2.3 Página
-
3. Carpeta
- 3.1 Página
- 3.2 Página
- 3.3 Página
- 4. Página
Paso 3
Puede agregar compatibilidad con versiones anteriores de los navegadores Internet Explorer a este código; se implementa mediante JavaScript (por Peter Nederlof). Debe descargar el archivo con el código requerido, por ejemplo, desde este enlace - https://peterned.home.xs4all.nl/htc/csshover3.htc. Debe colocarse en la misma carpeta que la página principal. Y en la descripción de los estilos de la página principal, agregue un enlace; se puede colocar directamente después de la etiqueta de estilo de apertura: / * para navegadores IE antiguos *
cuerpo {comportamiento: url ("csshover3.htc");}
