Menús desplegables - también conocido como menús "suckerfish" - usar una combinación de HTML y CSS (Cascading Style Sheets) para la estructura y el estilo. La parte HTML de un menú desplegable se compone de listas de viñetas y listas con viñetas anidadas. Después de que el estilo de la barra de menú y enlaces de navegación principal en la CSS, que el estilo de las listas de viñetas anidadas como submenús. El ": hover" selector de CSS le permite cambiar la propiedad de presentación de un submenú oculto para "bloquear" para que vuelva a aparecer.
Codificar el menú en HTML con las etiquetas "li" "ul" y:
Identificación del ul "menú" =
lia href = "link1.html" Link 1/a/li
lia href = "link2.html" Link 2/a/li
lia href = "link3.html" Link 3/a/li
div class = "clearfix" / div
/ Ul
Añadir un div clara-fix antes del final de la lista. Va a agregar un estilo a la clase "clearfix" para hacer de fondo del menú se extienden hacia abajo.
Agregue su submenú como una nueva lista desordenada anidado dentro de las etiquetas "li" de su vínculo padre:
Identificación del ul "menú" =
lia href = "link1.html" Link 1/a/li
lia href = "link2.html" Link 2 / a
ul
lia href = "link1.html" Link 1/a/li
lia href = "link2.html" Link 2/a/li
lia href = "link3.html" Link 3/a/li
/ Li
lia href = "link3.html" Link 3/a/li
/ Ul
Abra la hoja de estilo, y el estilo de su menú utilizando CSS. Retire las dos las balas y de izquierda guión:
# Menu {
list-style: none;
padding: 0;
}
Tenga en cuenta que "# menu" coincide con el nombre de identificación del código HTML de ejemplo.
Agregar un color de fondo de la barra de menú:
# Menu {
list-style: none;
padding: 0;
background-color: azul oscuro;
}
Flotador los elementos del menú de la izquierda para que se alinean horizontalmente en la barra de menús:
# Menu li {
float: left;
}
Estilo de los eslabones que conforman los elementos de menú. Añadir el relleno de los enlaces para alinearlos verticalmente en la barra de menú, mientras que lo que facilita hacer clic en y se ciernen sobre. Debe cambiar la propiedad "display" en "bloque" para agregar relleno a los enlaces:
# Menu li a {
display: block;
padding: 15px 8px;
text-align: center;
color: blanco;
font-weight: bold;
text-decoration: none;
}
Tenga en cuenta que en el "relleno", se han establecido dos valores. El primer valor es el relleno vertical, mientras que los segundos efectos relleno horizontal.
Estilo en el submenú y sus elementos. Primero tiene que colocar el submenú. Retire las balas y el relleno de los submenús, así:
Ul # menu {
position: absolute;
list-style: none;
padding: 0;
}
Retire las carrozas izquierda de los elementos de los submenús:
# Menu ul li {
clear: left;
}
Añadir "dsiplay: none" al menú "ul #" regla de apagar el submenú, ya que no desea que aparezca a menos que el usuario se desplaza sobre el tema de su padre. Hacer el menú aparecerá de nuevo utilizando este código:
# Menu li: hover ul {
dipslay: block;
}
Agregue la regla de "solución clara" a su div:
. Clearfix {
claro: ambos;
}
Consejos y advertencias
Añadir destacar a los elementos de menú cuando el usuario pasa por encima de ellos. Una regla de estilo para cambiar el color de fondo de un mantenido, a través del enlace parece "# menu a: hover {}".
Una vez que termine la construcción de su menú utilizando HTML y CSS, puede añadir un plugin de jQuery para hacer buenas animaciones de los menús desplegables.
No hay comentarios:
Publicar un comentario