5 pasos para crear un menú responsive unicamente con HTML, CSS y JS

Si estás dando tus primeros pasos en el diseño y desarrollo web querrás crear un menu resposive (adaptable) en este tutorial y con 5 sencillos pasos, te muestro como crear un menú responsive (adaptable) con HTML, CSS y Javascript. No tengas miedo al código de programación, usaremos Javascript pero será muy sencillo.

Crea el HTML

Vamos a crear el HTML necesario para hacer nuestro menú adaptable. Utilizaremos la etiqueta NAV por ser la semánticamente correcta. Luego utilizaremos un listado sin números, aunque podría ser con números.

Con lo anterior agregamos una “imagen” que puedes encontrar en formato SVG en el repositorio o bien puedes descargarla gratuitamente desde Flaticon.se mira de la siguiente forma el código:

HTML necesario para el menú

HTML necesario para el menú

y en el navegador se ve de la siguiente forma:

vista del HTML sin CSS

vista del HTML sin CSS

Nada atractivo, cierto? para eso usaremos CSS

Define el CSS

Para fines de este tutorial escribiré el CSS dentro de una etiqueta STYLE en el HEAD, sin embargo puedes hacerlo usando la etiqueta LINK.

Agregaremos por el momento clases a la etiqueta NAV y otra la UL, cada una de las líneas de código va comentada para que todo haga sentido.

El código queda de la siguiente forma:

CSS del Menú

CSS del Menú

y este es ahora su aspecto en el navegador:

Menú con estilos de CSS

Menú con estilos de CSS

nada mal, considerando que hemos usado muy poco código. Claro, podrías agregar cualquier cantidad de detalles, para fines del tutorial y de mantener los 5 pasos lo más claro es que no le daremos más detalle.

por el momento por medio de CSS vamos a ocultar nuestro botón de menú responsive o adaptable.

Escribe el CSS del responsive

¡Es hora de entrar en acción! para crear un menú responsivo (adaptable) necesita tener algunas nociones de @media query, los “Query” no son más que reglas o condiciones que estableces para que visualmente el contenido se adapte según los distintos anchos de pantallas.

Para fines de este tutorial vamos a usar de medida 768px que es la medida del IPAD en sentido vertical.

Lo primero que haremos dentro del media query será darle estilos al botón del menú:

CSS del responsive

CSS del responsive

Crearemos la clase “active” la misma nos servirá para cambiar el “left: “100%” por un “left:0”

Utiliza Javascript

Ahora vamos escribir código en Javascript. No tienes que saber programar, es muy sencillo, solo debes seguir la lógica.

Recuerdas la etiqueta NAV de nuestro HTML es el contenedor semántico del menú. Hemos dado dentro del media query estilos al botón y al menú y lo tenemos “off-canvas” o fuera del nuestro “canvas” o lienzo para que cuando demos click en el botón se muestre.

La lógica es sencilla: 

Usuario: ¿Hey javascript puede revisar si el menú tiene la clase “active”? 

Javascript: no, no la tiene.

Usuario: ¿puedes agregarla?

Javascript: ¡Ahora mismo!

Usuario: oye, pero ya seleccione lo que quiero, ¿puedes quitarla?

Javascript: ¡con gusto!

Sin embargo esta conversación es “invisible” a nosotros. Si vuelves a leer te darás cuenta que es una condición:

Si no tiene la clase, agregar la clase, si la tiene, quitar la clase.

Pero javascript necesita que le digamos algo más:

Usuario: hey javascript cuando de click en el botón ejecuta la condición.

Pero más importante aún ¿En qué botón? y ¿a qué agregamos o quitamos clases? Javascript no lee de forma nativa HTML por lo que por medio de una variable a la que “asignaremos” los valores de HTML vamos a ir a “traer” los elementos necesarios y su contenido.

Javascript para el menú

Javascript para el menú

Agrega la animación básica

Por último pero no menos importante, no te parece que se ve algo “tosco” pues con una línea en CSS vamos a agregar una “transición”.

Transición final para mejor experiencia

Transición final para mejor experiencia.

¿Qué te parece? ¿Ahora hacemos un “multinivel”? cuentame como te va con el menú.