Advertisement
  1. Web Design
  2. JavaScript

Cómo conservar el estado del menú al cargar la página (usando almacenamiento local)

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

En este tutorial, crearemos un sitio estático simple con Tailwind CSS y luego aprenderemos cómo conservar el estado de su menú al cargar la página.

La primera vez que visitemos el sitio, el menú estará oculto. Sin embargo, tan pronto como lo abramos y cerremos el navegador, utilizaremos almacenamiento local y JavaScript para mantener el menú abierto la próxima vez que visitemos el sitio. De hecho, permanecerá abierto hasta que lo volvamos a cerrar.

¿Estás listo para otro desafío?

1. Crea el proyecto

Como primer paso, tenemos que configurar la estructura del proyecto y decidir dónde lo alojaremos.

Una opción es desarrollarlo de manera local y después, una vez que esté listo, subirlo a GitHub Pages. He utilizado este método anteriormente para diferentes demostraciones. Por ejemplo, échale un vistazo a esta donde se personaliza las pestañas de Bootstrap 4.

Un método alternativo es usar CodePen Projects tanto para el desarrollo como para el alojamiento. Cabe señalar que, según tu plan de CodePen, podrás alojar una cantidad diferente de proyectos.

Para este tutorial, como no lo hemos hecho antes, vamos a crear un proyecto en CodePen y vamos a aprovechar todas las potentes funciones que lo acompañan.

How to create a CodePen ProjectHow to create a CodePen ProjectHow to create a CodePen Project

De manera predeterminada, CodePen ofrece varias plantillas de proyectos iniciales. Aquí, seleccionaremos la más básica.

The selected starter template for our CodePen ProjectThe selected starter template for our CodePen ProjectThe selected starter template for our CodePen Project

Nuestro proyecto incluirá cuatro archivos HTML similares, un archivo SCSS que se compilará en un CSS y un archivo JavaScript, como este:

The project structureThe project structureThe project structure

Y por último, aunque no por ello menos importante, podrás exportarlo y ejecutarlo desde tu máquina local.

You can export a CodePen ProjectYou can export a CodePen ProjectYou can export a CodePen Project

2. Tailwind CSS

En vez de crear los estilos desde cero, vamos a usar Tailwind CSS, un nuevo y popular framework de CSS con un enfoque «utility-first» y que ha ganado mucho terreno con los desarrolladores. Fue creado por Adam Wathan, su filosofía es mover toda la complejidad a los archivos HTML añadiendo clases preexistentes a los elementos.

Tailwind CSS frameworkTailwind CSS frameworkTailwind CSS framework

Como siempre me gustó este concepto, lo he seguido en el pasado para algunas demostraciones como esta. Aprende más aquí:

3. El HTML

Todos los archivos HTML contendrán una cabecera y algo de contenido ficticio.

Dentro de la cabecera colocaremos:

  • El logotipo de la empresa
  • El ícono de hamburguesa
  • El menú de navegación

También necesitaremos incluir los siguientes archivos:

  • El archivo de CSS Tailwind
  • Nuestros propios archivos de CSS y JavaScript

Para hacer que el ícono de hamburguesa sea un poco más accesible, usaremos los atributos ARIA: aria-label, aria-extended y aria-controls. Como veremos más adelante, los valores de los dos primeros atributos cambiarán según el estado del menú.

Este es el marcado para la página index.html:

No te sientas abrumado por la cantidad de clases auxiliares de CSS. Todas estas provienen de Tailwind CSS (además de toggle-button y menu que usaremos en la parte de JavaScript para hacer referencia a los elementos objetivo).

Como este no es un tutorial sobre Tailwind, no voy a explicar lo que hace cada clase. La mayoría de ellas se explican por sí mismas, pero hay otras como text-5xl que no son tan claras, por lo que tendrás que buscar en la documentación o en la consola del navegador y ver su uso exacto.

Solo para darte una idea, considera las clases que aplicamos al elemento .menu junto con el CSS generado:

Clase de utilidad CSS generado
flex display: flex;
transition-transform
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms
transform
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
translate-y-full --tw-translate-y: 100%;

4. Alternar el menú

Cada vez que hagamos clic en el enlace del menú, ocurrirán las siguientes acciones:

  • Cambiaremos su clase is-active. Si contiene esta clase, se tranformará suavemente en un ícono menos.
  • Cambiaremos la clase translate-y-full del menú. Esta es una clase de Tailwind que determinará si el menú aparecerá o no.
  • Dependiendo del estado del menú, actualizaremos los atributos aria-label y aria-expanded de ARIA.

Este es el código JavaScript que implementará esta funcionalidad:

Y los estilos SCSS relacionados:

Conservar el estado del menú al cargar la página

Hasta el momento, nuestro menú funciona muy bien. Pero vayamos un paso más allá y aprendamos cómo preservar su estado. Dicho lo cual, la primera vez que visitemos el sitio, el menú será invisible. Sin embargo, tan pronto como lo abramos y cerremos el navegador, este permanecerá abierto la próxima vez que visitemos el sitio hasta que lo volvamos a cerrar.

Este es un caso perfecto para mostrar cómo el almacenamiento local puede resolver este tipo de solicitud.

Seamos más específicos:

  • Tras hacer clic en el ícono de hamburguesa, guardaremos en el almacenamiento local la clave menu-state. Los valores posibles pueden ser open y closed.
Store the menu state in local storageStore the menu state in local storageStore the menu state in local storage
  • Cuando la página se cargue, comprobaremos el valor de esta clave. Si el usuario ya ha abierto el menú, el ícono de hamburguesa recibirá la clase is-active, el menú no contendrá la clase translate-y-full y los atributos relacionados con ARIA cambiarán en consecuencia.
The open state of the menuThe open state of the menuThe open state of the menu

Veamos el código JavaScript que controlará esta lógica:

Naturalmente, como mejora, puedes evitar que las animaciones se ejecuten al cargar la página. Pero dejaré esto por ahora, ya que su importancia es secundaria.

¡Has aprendido cómo usar el almacenamiento local!

¡Hemos terminado, amigos! Hoy, aprendimos a crear un proyecto de CodePen utilizando Tailwind CSS para sus estilos y manteniendo el estado de su menú al cargar la página con JavaScript y almacenamiento local. Espero que hayas aprendido una o dos cosas nuevas y que pronto puedas aplicarlas en tus proyectos.

No dudes en mejorar la demostración haciendo que el menú sea aún más accesible o añadiendo más funciones de Tailwind. De ser así, ¡no olvides compartirlo con nosotros!

Como Tailwind es un tema de moda en este momento, planeo escribir un tutorial orientado a Tailwind que describirá cómo personalizar sus opciones predeterminadas o combinarlo con otro framework popular como Bootstrap. Si quieres algo específico como esto, háznoslo saber a través de las redes sociales.

¡Como siempre, gracias por leer!

Más proyectos de JavaScript prácticos

Tenemos bastantes tutoriales interesantes de JavaScript que te ayudarán a aprender. ¡Adelante!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.