Se puede crear un bonito menú desplegable no solo en JavaScript, sino también utilizando etiquetas HTML estándar. Este método para crear un menú desplegable será útil para aquellos que recién están comenzando sus primeros pasos en la creación de sitios y desean simplificar el trabajo de crear menús en las páginas.
Instrucciones
Paso 1
En código HTML, dicho menú es una lista desordenada con listas anidadas en su interior. Para comenzar, cree un archivo style.css y copie el siguiente código CSS allí para diseñar y dar formato al menú:
#nav, #nav ul {
estilo de lista: ninguno;
margen: 0;
acolchado: 0;
borde: 1px sólido # 000;
fondo: # 515151;
flotador izquierdo;
ancho: 100%;
}
#nav li {
flotador izquierdo;
posición: relativa;
color de fondo: # 003366;
back / ground: ninguno;
}
#nav li ul {
pantalla: ninguna;
posición: absoluta;
color de fondo: # 003366;
relleno: 8px 0;
ancho: 138px;
}
Paso 2
Ahora necesitamos agregar algo de decoración a los elementos del menú. Defina el ancho y el alto para ellos, elimine las líneas de subrayado, establezca un ancho claro para cada enlace y especifique los colores de fondo deseados.
Paso 3
Para todos estos cambios, agregue el siguiente código al archivo:
#nav a {
color: #fff;
decoración de texto: ninguna;
bloqueo de pantalla;
ancho: 120px;
relleno: 4px 10px;
color de fondo: # 003366 repeat-y right;
}
#nav a: hover {
color: # 000;
color de fondo: # 0033FF;
}
#nav li: hover {
color de fondo: # 333333;
}
Luego agregue el siguiente fragmento de código para finalizar el menú:
#nav li: hover li ul {
pantalla: ninguna;
ancho: 138px;
superior: -9px;
izquierda: 133px;
}
#nav li: hover li: hover ul {
bloqueo de pantalla;
}
Paso 4
En la versión HTML, la lista de menú desordenada general se ve así: en su base, se crea el menú, que se mencionó en el artículo.
- Casa
-
Catalogar
-
Todos los productos
- Por fecha
- Fabricantes
- Otro
-
