ubiquitour.com

Cómo crear un menú desplegable HTML menú y submenú

Menús desplegables--también conocido como menús "suckerfish"--usan una combinación de HTML y CSS (Cascading Style Sheets) para la estructura y estilo. La parte HTML de una lista desplegable consiste en listas de bala y bala anidada listas. Después de estilo de la barra de menú y vínculos de navegación principal en CSS, estilo las listas anidadas bala como submenús. El ": hover" selector en CSS le permite cambiar la propiedad de display de un submenú oculto para "bloquear" a hacer que reaparezca.

Instrucciones

1 El menú en HTML usando el "< ul >" el código «< li >» etiquetas y:

< ul id = "menu" >

< li >< un href="link1.html" > enlace 1 < /a >< /li >

< li >< un href="link2.html" > Enlace 2 < /a >< /li >

< li >< un href="link3.html" > enlace 3 < /a >< /li >

< div clase = "clearfix" >< / div >

< /ul >

Agregar un div clear fix antes de final de la lista. Se agregar un estilo a la clase "clearfix" para hacer fondo de menú se extienden hacia abajo.

2 Agregue el submenú como una nueva lista sin ordenar había anidado dentro de su padre de link «< li >» Etiquetas:

< ul id = "menu" >

< li >< un href="link1.html" > enlace 1 < /a >< /li >

< li >< un href="link2.html" > Enlace 2 < /a >

&lt;ul>

&lt;li>&lt;a href="link1.html">Link 1&lt;/a>&lt;/li>

&lt;li>&lt;a href="link2.html">Link 2&lt;/a>&lt;/li>

&lt;li>&lt;a href="link3.html">Link 3&lt;/a>&lt;/li>

< /li >

< li >< un href="link3.html" > enlace 3 < /a >< /li >

< /ul >

3 Abra la hoja de estilos, y estilo su menú con CSS. Quitar las balas y la sangría izquierda:

{menú} lista estilo: ninguno;

padding: 0;

}

Tenga en cuenta que "#menu" coincide con el ID del ejemplo de código HTML.

4 Agregar un color de fondo a su barra de menú:

{menú} lista estilo: ninguno;

padding: 0;

color de fondo: azul marino;

}

5 Flotar los elementos del menú a la izquierda por lo que en línea horizontal en la barra de menú:

menú li {} Float: left;

}

6 Estilo de los enlaces que conforman su menú. Añadir el relleno en los enlaces para la les línea verticalmente en la barra de menús mientras que siendo más fácil hacer clic en y pasa el cursor sobre. Debe cambiar la propiedad "display" a "bloquear" para agregar relleno a enlaces:

menú li a {} Mostrar: bloquear;

padding: 8px 15px;

texto-alinee: Centro;

color: blanco;

font-weight: bold;

texto-decoration: none;

}

Tenga en cuenta que en "relleno", se han creado dos valores. El primer valor es relleno vertical mientras que el segundo relleno horizontal de efectos.

7 Estilo el submenú y sus elementos. Primero debes colocar el submenú. Quitar las balas y el relleno de los submenús, así:

menú ul {} posición: absoluto;

lista estilo: ninguno;

padding: 0;

}

8 Retire los flotadores de la izquierda de los elementos de los submenús:

menú ul li {} claro: a la izquierda;

}

9 Añadir "dsiplay: ninguno" a la regla de "#menu ul" para apagar el submenú, ya que no desea que aparezca a menos que el usuario se desplaza sobre el tema de su padre. Hacer que el menú aparezca otra vez usando este código:

menú li:hover ul {} dipslay: bloquear;

}

10 Agregar la regla de "solución clara" a tu div:

.clearfix {}

claro: ambos;

}

Consejos y advertencias

  • Añadir destacando a sus artículos de menú cuando el usuario se cierne sobre ellos. Se parece a una regla de estilo para cambiar el color de fondo de un vínculo se cernía sobre "#menu a: hover {}".
  • Una vez que termines de construir tu menú con HTML y CSS, puede añadir un plugin de jQuery para hacer animaciones agradables para los desplegables.