Crear un menú desplegable muy básico con jQuery

martes, septiembre 27, 2011
COMPARTE EL POST

Crear un menú desplegable muy básico con jQuery He estado desde hace algunas semanas practicando un poco de jQuery, y se me ocurrió para el tutorial de hoy hacer un menú desplegable muy básico con jQuery, en donde aprenderemos a construir la estructura básica de un menú desplegable con CSS, y ya después podremos animarlo con jQuery, y darle el dinamismo necesario.

Entonces, no se pierdan el tutorial, que por cierto, estoy pensando hacer video tutoriales pero ahora con jQuery, para que aprendan a programar usando esta librería. Resultado Final

Estructura HTML

El principio básico de todo menú desplegable es que se usen listas para ellos. Como sabemos, las listas tienen dos elementos, la etiqueta iniciadora, que puede ser <ul>, u <ol>. Después de eso ya sabemos que <li> se usa para crear un nuevo elemento.

Entonces, el código consiste en tener una lista, y dentro de la lista otra lista, que simulará el menú emergente en caso de que una opción tuviera opciones. Como si fueran capas, hay una lista principal que alberga a todo, y de ahí ya podemos ir creando las sub-secciones.

Hasta este paso tenemos que tener algo así:

image

CSS

Ya tenemos la estructura, ahora lo que tenemos que hacer es que la lista no se vea lista, sino menú horizontal. El código en si se basa en la posición y el estilo flotante de las sublistas, para poder así con jQuery poder modificar el comportamiento, y que esté superpuesto a todo lo demás. Otra cosa importante, en el caso de este menú, hay un submenu, y un subsubmenu, pero podríamos agregar los que quisiéramos, bastaría con agregar más estilos CSS

Con los estilos ya podríamos tener algo así:

image

jQuery

Lo que debemos recordar siempre es que debemos incluir la librería de jQuery para poder usarlo, sino no podremos hacer nada. Ya teniendo eso podemos continuar con el código.

La idea del código es muy simple. Lo primero que hacemos es ocultar las listas a partir de la lista que contiene todas, de esa forma las secciones no desaparecerán, pero las subsecciones y subsubsecciones si. Después de eso le aplicamos una función a todos los elementos, de tal forma que si al pasar el cursor tienen un elemento hijo entonces lo van a mostrar con una pequeña animación. Y por último necesitamos hacer lo opuesto, cuando el mouse ya no pase por el menú se esconderán las subsecciones. El menú final debería terminar así:

image

El código final sería este:

¡Síguenos en Twitter!


Deja tu comentario