Cómo crear un menú responsive en 5 pasos

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.

¿Cómo te fue al crear un menú responsive en 5 pasos? ¿Ahora hacemos un “multinivel”? cuentame como te va con el menú.

Aprender a escribir mientras escribo

En el mundo de escribir para internet, me toca aprender a escribir, mientras escribo. No hay otra forma. Es seguro que me falte habilidades de redacción, No cabe duda que aún tengo que mejorar mi ortografía. Sin embargo la mejor forma de ir aprender a escribir, es escribiendo.

Así que está entrada será para definir algunas de las cosas que estaré aplicando en mis siguientes entradas, según lo que he estado estudiando acerca de escribir para internet.

Checklist para escribir para internet
Checklist para escribir para internet

 Título

Usualmente redactado en forma de enunciado o de pregunta. La segunda forma es responde a que solo los que tenemos preguntas encontramos respuestas. Por si fuera poco sólo los cerebros que se hacen preguntan son los que aprenden.

¿Qué responde/expresa el post?

En dos o tres líneas del encabezado me esforzare por escribir las preguntas relacionadas al título, eso puede ser preguntas sobre la pregunta o bien un breve descripción de lo que les contaré a lo largo del post.

Tamaño de los párrafos

Desde una línea a un máximo de cinco. No más, lo prometo. Escribir para internet es escribir para la prisa, no para los adornos. Me esforzaré por no adornar, ser claro, directo, conciso.

Imágenes

Si son de código o de un tutorial, serán capturas de alta definición y muy poco peso. Si son puramente ilustrativas serán de aquí o bien de Pexeles, también tendré muy presente el atributo “alt” y dar los creditos al autor.

Enlaces

Los enlaces son valiosos, así que todos serán a sitios seguros y confiables, que los haya usado previamente, de lo contrario no tendrá enlaces externos. Es posible que contenga algunos internos.

Videos

Al igual que en el caso de los enlaces serán vídeos que aporten valor, ilustrativos o nada.

El resumen o cierre

Para terminar cada post me esforzaré en resumir en 5 líneas máximo lo más importante de cada entrada.

En el Futuro

Aprender a escribir mientras escribo para Internet es una aventura. Buscaré agregar búsquedas de palabras clave, para ir mejorando el SEO, todos queremos un mejor SEO y que este blog, vea sus primeras luces no quiere decir que no quiera tener un buen SEO.

Gracias por pasar, leer, suscribirte, comentar y recomendar. ¿Qué más puedo aprender para escribir mientras escribo?