Cómo crear un menú de hamburguesas animado escalonado con Divi & Anime.js

En el pasado, compartimos diferentes tipos de encabezados que puede crear con Divi y Divi Theme Builder. De hecho, puede encontrar todos esos tutoriales enumerados en esta publicación de navegación. En esa publicación, notará que le mostramos cómo crear un encabezado de pantalla completa, pero para ayudarlo a llevar el diseño de su encabezado aún más lejos, también le mostraremos cómo crear un menú de hamburguesa animado personalizado. Hay algunas cosas notables sobre el menú de hamburguesas que crearemos:

• Tan pronto como los visitantes hagan clic en el ícono de la hamburguesa, aparecerá un encabezado de pantalla completa y cada elemento del menú se revelará uno por uno, lo que le dará una apariencia y sensación de animación personalizada.
• Las animaciones personalizadas se activan cada vez que se abre el menú.
• También podrá agregar elementos desplegables a los elementos del menú principal, estos se abren al hacer clic y se cierran automáticamente tan pronto como alguien cierra el menú o hace clic en un elemento de navegación

En otras palabras, este es definitivamente un tutorial de encabezado que lo ayudará a agregar esa apariencia avanzada a su sitio web. ¡También puede diseñar los elementos como desee y podrá descargar el archivo de plantilla JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de encabezado global GRATIS

Para tener en sus manos la plantilla de encabezado global gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Cree una nueva plantilla de encabezado

Vaya a Divi Theme Builder y agregue una nueva plantilla de encabezado global

Empiece por ir a Divi Theme Builder. Uno allí, agregue un nuevo encabezado global.

Empiece a construir desde cero

Y comience a construir el diseño del encabezado desde cero.

2. Crear logotipo e ícono de hamburguesa

Configuración de la sección

Color de fondo

Una vez dentro del editor de plantillas, comenzaremos construyendo el logo y el icono de hamburguesa. Notarás que ya hay una sección allí. Abra la configuración de la sección y aplique un color de fondo transparente.

• Color de fondo: rgba (255,255,255,0)

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado a continuación.

• Relleno superior: 0px
• Acolchado inferior: 0px

Posición

Luego, vaya al avanzado y gire el tramo fijo.

• Posición: fija
• Ubicación: arriba a la izquierda
• Índice Z: 13

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de la fila, pase a la pestaña de diseño y cambie la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 95%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

CSS del elemento principal

Y para asegurarnos de que tanto el logotipo como el icono de la hamburguesa aparezcan uno al lado del otro en tamaños de pantalla más pequeños, insertaremos una línea de código CSS en el elemento principal de la fila.

display: flex;

Agregar módulo de imagen a la columna 1

Subir logotipo

Es hora de agregar módulos, comenzando con un Módulo de imagen en la columna 1. Cargue un logotipo de su elección.

Dimensionamiento

Vaya a la pestaña de diseño y cambie la configuración de tamaño a continuación.

• Anchura máxima:
  • Escritorio: 80px
  • Tableta y teléfono: 50px

Posición

Luego, reposicione todo el módulo.

• Posición: Absoluto
• Ubicación: arriba a la izquierda
• Desplazamiento vertical: 20px

Agregar módulo de texto a la columna 3

Estructura HTML en el cuadro de contenido

En la tercera columna, agregaremos un módulo de texto. Usaremos este módulo de texto para crear nuestro icono de hamburguesa. Comience cambiando a la pestaña de texto en el cuadro de contenido e inserte las siguientes etiquetas HTML:

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Dimensionamiento

A continuación, modifique la configuración de tamaño del módulo.

• Ancho: 80px
• Alto: 80px

Espaciado

Luego, aplique valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior:
  • Escritorio: 10px
  • Tableta y teléfono: 17px
• Acolchado inferior:
  • Escritorio: 10px
  • Tableta y teléfono: 17px
• Acolchado izquierdo:
  • Escritorio: 15px
  • Tableta y teléfono: 30px
• Acolchado derecho:
  • Escritorio: 15px
  • Tableta y teléfono: 10px

Posición

Vuelva a colocar este módulo también.

• Posición: Absoluto
• Ubicación: esquina superior izquierda

3. Crear menú de hamburguesas

Agregar nueva sección

Fondo degradado

Ahora que tenemos el logo y el ícono de la hamburguesa en su lugar, podemos pasar a la siguiente parte que está dedicada a construir el menú de hamburguesas y todos sus elementos. Comience agregando una nueva sección, abra la configuración de la sección y aplique un fondo degradado.

• Color 1: # 000000
• Color 2: # 111111
• Tipo de degradado: lineal
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 50%

Dimensionamiento

Aplique una altura mínima y una altura máxima a la configuración de tamaño a continuación.

• Altura mínima: 100vh
• Altura máxima: 100vh

Espaciado

Luego, elimine todo el acolchado superior e inferior de la sección predeterminada.

• Relleno superior: 0px
• Acolchado inferior: 0px

Desbordes

Modifique también los desbordamientos.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: automático

Posición

Para asegurarnos de que el menú se pueda abrir en todo momento, cambiaremos la posición de la sección en la pestaña avanzada.

• Posición: fija
• Ubicación Centro superior

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila, pase a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Desbordes

Luego, vaya a la pestaña avanzada y cambie los desbordamientos.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: automático

Posición

Vuelva a colocar la fila también.

• Posición: Absoluto
• Ubicación Centro superior

Configuración de la columna 1

Espaciado

A continuación, abriremos la configuración de la columna 1 de nuestra fila y aplicaremos algunos valores de relleno de respuesta personalizados.

• Acolchado superior:
  • Escritorio: 24vh
  • Tableta y teléfono: 10vh
• Acolchado inferior:
  • Escritorio: 24vh
  • Tableta y teléfono: 5vh
• Acolchado izquierdo: 13%
• Acolchado derecho: 13%

Frontera

También aplicaremos algunas configuraciones de borde:

• Ancho del borde derecho:
  • Escritorio: 2px
  • Tableta y teléfono: 0px \
• Color del borde derecho: # 191919
• Ancho del borde inferior:
  • Escritorio: 0px
  • Tableta y teléfono: 2px
• Color del borde derecho: # 191919

Configuración de la columna 2

Espaciado

Luego, pasaremos a la columna 2 y aplicaremos allí también algunos valores de relleno personalizados.

• Acolchado superior:
  • Escritorio: 24vh
  • Tableta y teléfono: 5vh
• Acolchado inferior:
  • Escritorio: 24vh
  • Tableta y teléfono: 5vh
• Acolchado izquierdo: 13%
• Acolchado derecho: 13%

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido H3

Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue algún contenido H3 de su elección.

Configuración de texto H3

Vaya a la pestaña de diseño y cambie la configuración de texto H3 de la siguiente manera:

• Fuente del encabezado 3: Montserrat
• Peso de la fuente del encabezado 3: Ultra Bold
• Estilo de fuente del título 3: mayúsculas
• Color del texto del encabezado 3: #ffffff
• Tamaño del texto del encabezado 3
  • Escritorio: 1vw
  • Tableta: 2.5vw
  • Teléfono: 3.5vw
• Encabezado 3 espaciado de letras: 5px

Espaciado

A continuación, agregue un poco de margen inferior.

• Margen inferior: 5vh

Clonar el módulo de texto y colocar el duplicado en la columna 2

Una vez que haya completado este primer módulo, puede clonarlo una vez y colocar el duplicado en la columna 2.

Cambiar contenido

Asegúrese de cambiar el contenido en este módulo duplicado.

Agregue el módulo de texto n. ° 2 a la columna 2

Estructura HTML en el cuadro de contenido

Para mostrar los elementos de nuestro menú, incluidos los elementos del submenú, usaremos la pestaña de texto de un nuevo módulo de texto. Continúe y agregue un nuevo módulo de texto a la columna 1 e inserte el siguiente HTML:

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Delgado
• Color del texto: #ffffff
• Tamano del texto:
  • Escritorio: 2.7vw
  • Tableta: 4vw
  • Teléfono: 6vw
• Espaciado de letras de texto: 0.1em
• Altura de la línea de texto: 1em

Configuración del texto del enlace

Cambie también el color del texto del enlace.

• Color del texto de Lin: #ffffff

Configuración de texto de lista desordenada

Luego, modifique la configuración del texto de la lista desordenada.

• Fuente de lista desordenada: Montserrat
• Peso de fuente de lista desordenada: negrita
• Estilo de fuente de lista desordenada: mayúsculas
• Tamaño de texto desordenado:
  • Escritorio: 1vw
  • Tableta: 2.5vw
  • Teléfono: 3.5vw
• Altura de línea de lista desordenada: 1.5em
• Tipo de estilo de lista desordenada: Ninguno
• Posición de estilo de lista desordenada: Interior

Espaciado

Y complete la configuración del módulo agregando un acolchado superior e inferior personalizado.

• Acolchado superior: 5%
• Acolchado inferior: 5%

Clonar módulo de texto para crear variaciones sin submenú

Una vez que haya completado el primer módulo, puede clonarlo una vez. Usaremos esta duplicación para crear una variación del elemento del menú sin elementos del submenú.

Salir del submenú y alternar el icono

Para convertir este módulo duplicado en un elemento de menú normal sin elementos de submenú, utilice esta estructura HTML en su lugar:

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

Reutilizar ambos tipos de elementos del menú

Una vez que tenga ambas variaciones de los elementos del menú en su lugar, puede reutilizarlos en consecuencia clonándolos y cambiando el contenido.

Agregue el módulo de texto n. ° 2 a la columna 2

Agregar contenido de párrafo y H4 al cuadro de contenido

En la columna 2, agregaremos otro módulo de texto con algo de contenido H4 y de párrafo de nuestra elección.

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Alata
• Color del texto: #cecece
• Tamano del texto:
  • Escritorio: 0.8vw
  • Tableta: 2.4vw
  • Teléfono: 3.4vw
• Espaciado de letras de texto: 1px
• Altura de la línea de texto: 1.5em
• Color del texto: claro

Configuración de texto H4

Realice también algunos cambios en la configuración de texto H4.

• Tamaño del texto del encabezado 4:
  • Escritorio: 1vw
  • Tableta: 3vw
  • Teléfono: 4vw

Dimensionamiento

Luego, modifique el ancho del módulo en la configuración de tamaño.

• Ancho: 48%

CSS del elemento principal

Y agregue una línea de código CSS al elemento principal del módulo. Esta línea de código CSS nos ayudará a colocar dos módulos de texto uno al lado del otro.

display: inline-block;

Módulo de clonación de texto n. ° 2

Cambiar copia

Una vez que haya completado el Módulo de texto, puede clonarlo una vez y cambiar el contenido en consecuencia.

Agregue el módulo de seguimiento de redes sociales a la columna 2

Agregue las redes sociales de su preferencia

El último módulo que necesitamos en este diseño es un Módulo de seguimiento de redes sociales en la columna 2. Agregue las redes sociales de su elección.

Eliminar el color de fondo de cada red social individualmente

Elimina el color de fondo de cada red social de forma individual.

Espaciado

Luego, regrese a la configuración general del módulo y aplique un margen superior.

• Margen superior: 5vh

4. Agregue funcionalidad

Agregar clase CSS al módulo de texto de icono de hamburguesa

Ahora que se ha construido la base del diseño de nuestro menú de hamburguesas, ¡ahora podemos concentrarnos en agregar funcionalidad! Lo primero que deberá hacer es abrir el Módulo de texto que contiene el ícono de hamburguesa y agregar la siguiente clase CSS:

• Clase CSS: ancho completo abierto

Agregue la clase CSS a la sección n. ° 2

Luego, abra la sección del menú de hamburguesas, sección # 2, y agregue la siguiente clase CSS:

• Clase CSS: menú de ancho completo

Agregar clase CSS a cada módulo en el menú de ancho completo

Para crear el efecto de animación escalonado personalizado, necesitaremos aplicar la siguiente clase CSS a cada módulo en la sección # 2.

• Clase CSS: efecto escalonado

Agregar clase CSS adicional a los elementos del menú

Agregue una clase CSS adicional, llamada "elemento del menú principal", a cada uno de los elementos del menú en la columna 1 también.

• Clase CSS: elemento de menú principal de efecto escalonado

Agregar módulo de código a la sección n. ° 1

Para aplicar la funcionalidad, usaremos CSS personalizado y código JQuery. Colocaremos este código en un nuevo módulo de código en la segunda columna de nuestra fila en la sección # 1.

Insertar código CSS

Agregue el siguiente código CSS al módulo de código entre las etiquetas de estilo, como puede observar en la pantalla de impresión a continuación.

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

Insertar biblioteca Anime.js

Continúe agregando la biblioteca de JavaScript de Anime usando etiquetas de script como puede ver en la pantalla de impresión a continuación . Usaremos esta increíble biblioteca para crear el efecto de escalonamiento en el siguiente paso del tutorial.

• src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

Insertar código JQuery

Las funcionalidades de clic en nuestro menú de hamburguesas están impulsadas por el siguiente código JQuery. Asegúrese de colocar este código entre las etiquetas de secuencia de comandos, como puede ver en la pantalla de impresión a continuación.

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

Active la clase CSS tan pronto como haya completado su diseño de encabezado de pantalla completa

Por último, pero no menos importante, habilitaremos una clase CSS en el Módulo de código que puede encontrar en la primera sección. Abra el Módulo de código y elimine el “/ * * /” al principio y al final de la clase. Habilitar esta clase (en combinación con algún código de JQuery que ya está habilitado) asegurará que la sección que contiene los elementos del menú no se cargue de inmediato cuando alguien visite una de sus páginas. Una vez que habilite esta clase, la segunda sección de su página desaparecerá del Visual Builder, pero aún puede acceder a ella en el modo Wireframe o desactivar la clase CSS si desea realizar cambios adicionales.

5. Guardar cambios de encabezado y generador de temas

¡Eso es todo! ¡Lo único que queda por hacer es guardar la plantilla y Divi Theme Builder y ver el resultado en su sitio web!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con su encabezado Divi. Más específicamente, le mostramos cómo crear un menú de hamburguesa animado personalizado. Tan pronto como un visitante hace clic en el icono de la hamburguesa, un menú de pantalla completa cambia y revela los elementos del menú uno por uno, lo que da como resultado una hermosa experiencia de usuario. ¡También pudo descargar el archivo JSON de plantilla de forma gratuita! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.