logo-antoiba

Antonio Ibáñez Programming

Menu Dropdown con jQuery y CSS

JavaScript jQuery CSS3

Todo creador de páginas web siempre quiere a mano un tutorial para hacer un menú dropdown que sea además responsive. Creo que es bastante necesario que un menú sea responsive. A pesar de que haya herramientas que faciliten esta labor, creo que es muy útil conocer como se crean.

¿Qué vamos a utilizar para ello? Utilizaremos CSS y media queries para adaptarlo a diferentes formatos con ayuda de jQuery para conseguir que el menú se adapte dependiendo del formato.

Se podría hacer un menú dropdown solo con css pero no lo recomiendo, jQuery le da mucho más juego y más potencia. El ejemplo de un menú dropdown responsive lo podéis ver en esta web.

Aquí tenéis el JSfiddle para que veáis el resultado.

A continuación podemos ver el código. Tenemos una clase "menu-bar" para cuando se haga responsive y el span que es el icono del menú.

Después podemos ver un "ul" con sus hijos "li". Aquellos hijos que tengan además un submenú deberán de llevar una clase especial que he puesto "lis_with_children" en un arrebato de originalidad.


Escribe un comentario

Anterior ¿Qué es ProcessWire?

Está web utiliza cookies para asegurarse de una mejor experiencia de nuestra página webMás información sobre las cookies