En este tutorial aprenderás a crear crear un menu responsive utilizando media queries y jQuery que podrás implementar en tu sitio web.

VER EN CODEPEN >

Nuestro menu sera desktop-first, esto quiere decir que primero estableceremos reglas css para pantallas de escritorio y luego mediante media queries adaptaremos este menu a pantallas de menor tamaño.

HTML

Primeros definimos la estructura de nuestro menu, para ello escribimos el siguiente código HTML.

No olvidar que debemos definir dentro del head de nuestro documento el meta viewport:

Estilos menu css en “Desktop”

Ahora aplicaremos estilos css  para estilizar nuestro menu. En los comentarios explicare, un poco, que es lo que hace cada estilo definido.

Hemos ocultado el elemento #nav-mobile con display:none, para que no sea visible en desktop.

Estilos css en “mobile”

Utilizando CSS3 media queries, establecemos los estilos para cambiar la apariencia de nuestro menú en diferentes tamaños de pantalla.

En este caso cuando el ancho maximo (max-width) de la pantalla sea menor o igual a 768px ocultaremos el menu y mostraremos el botón .nav-menu.

Como pueden ver he definido un max-height:0 para el elemento .nav-menu y oculto su contenido con overflow:hidden, esto se hizo para realizar una animación agradable cuando se despliegue el menú con la clase .open-menu.

Desplegar menú con jQuery

Finalmente, asignamos una función al evento click con el método .on() al botón .nav-mobile, dentro de esta función y utilizando toggle() de jQuery podemos agregar/quitar las clases nav-open y/o open-menu para poder desplegar nuestro menu.

En el caso de que solo utilicemos Javascript, el código sería el siguiente:

Y así es como tenemos un menú responsive básico que se vera bien en tablet y otros dispositivos móviles.

Interacciones del lector

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *