Cómo construir un menú de hamburguesas con animación escalonada con Divi y Anime.js

En el pasado, hemos compartido 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 su diseño de 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 animada 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 tus manos la plantilla de encabezado global gratuita, primero deberás descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

1. Crear nueva plantilla de encabezado

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

Comience yendo al Divi Theme Builder . Uno allí, agregue un nuevo encabezado global.

Comience a construir desde cero

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

2. Logotipo de construcción e icono de hamburguesa

Ajustes de sección

Color de fondo

Una vez dentro del editor de plantillas, comenzaremos construyendo el logotipo y el ícono de la 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

Pase 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
  • Relleno inferior: 0px

Posición

Luego, ve a la avanzada y gira la sección fija.

  • 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 utilizando 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 del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 95%
  • Ancho máximo: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Elemento principal CSS

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

01
display: flex;

Agregar módulo de imagen a la columna 1

Cargar 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

Pase 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, vuelva a colocar todo el módulo.

  • Posición: Absoluta
  • 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:

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

Dimensionamiento

Modifique la configuración de tamaño del módulo a continuación.

  • Ancho: 80px
  • Altura: 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
  • Relleno izquierdo:

    • Escritorio: 15px
    • Tableta y teléfono: 30px
  • Relleno derecho:

    • Escritorio: 15px
    • Tableta y teléfono: 10px

Posición

Vuelva a colocar este módulo también.

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

3. Crear menú de hamburguesas

Agregar nueva sección

Fondo degradado

Ahora que tenemos el logotipo y el ícono de la hamburguesa en su lugar, podemos pasar a la siguiente parte, que está dedicada a crear 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 gradiente: 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 relleno superior e inferior de la sección predeterminada.

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

desbordamientos

Modifique los desbordamientos también.

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

Posición

Para asegurarnos de que el menú se pueda abrir en todo momento, reubicaremos 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 utilizando 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 de la siguiente manera:

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

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

desbordamientos

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: Absoluta
  • 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
  • Relleno izquierdo: 13%
  • Relleno derecho: 13%

Borde

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
  • Relleno izquierdo: 13%
  • Relleno 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 contenido H3 de su elección.

Configuración de texto H3

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

  • Título 3 Fuente: Montserrat
  • Encabezado 3 Peso de fuente: Ultra negrita
  • Título 3 Estilo de fuente: Mayúsculas
  • Título 3 Color del texto: #ffffff
  • Título 3 Tamaño del texto

    • Escritorio: 1vw
    • Tableta: 2.5vw
    • Teléfono: 3.5vw
  • Encabezado 3 Espaciado entre letras: 5px

Espaciado

Agregue un poco de margen inferior a continuación.

  • Margen inferior: 5vh

Clonar módulo de texto y colocar 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 de este módulo duplicado.

Agregue el Módulo de Texto #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:

01
02
03
04
05
<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

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

  • Fuente del texto: Montserrat
  • Peso de fuente de texto: Fino
  • Color del texto: #ffffff
  • Tamano del texto:

    • Escritorio: 2.7vw
    • tableta: 4vw
    • Teléfono: 6vw
  • Espaciado entre letras de texto: 0,1 em
  • Altura de línea de texto: 1em

Ajustes de texto de enlace

Cambie el color del texto del enlace también.

  • Color del texto 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,5 em
  • 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 relleno superior e inferior personalizado.

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

Clonar módulo de texto para crear una variación 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ú.

Omitir submenú e icono de alternar

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

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

Reutilice 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 #2 a la Columna 2

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

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

Configuración de texto

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

  • Fuente del texto: Alata
  • Color del texto: #cecece
  • Tamano del texto:

    • Escritorio: 0.8vw
    • Tableta: 2.4vw
    • Teléfono: 3.4vw
  • Espaciado entre letras de texto: 1px
  • Altura de línea de texto: 1,5 em
  • Color del texto: Claro

Configuración de texto H4

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

  • Título 4 Tamaño del texto:

    • Escritorio: 1vw
    • Tableta: 3vw
    • Teléfono: 4vw

Dimensionamiento

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

  • Ancho: 48%

Elemento principal CSS

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.

01
display: inline-block;

Módulo de texto clonado #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

Agregar Redes Sociales de Elección

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 individualmente.

Espaciado

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

  • Margen superior: 5vh

4. Agregar funcionalidad

Agregue la clase CSS al módulo de texto del icono de hamburguesa

Ahora que se ha construido la base de nuestro diseño de 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 la hamburguesa y agregar la siguiente clase CSS:

  • Clase CSS: ancho completo abierto

Agregar Clase CSS a la Sección #2

Luego, abre la sección del menú de hamburguesas, sección #2, y agrega 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 de escalonamiento personalizado, necesitaremos aplicar la siguiente clase de CSS a cada módulo en la sección n.º 2.

  • Clase CSS: efecto de escalonamiento

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 del menú principal con efecto de escalonamiento

Agregar Módulo de Código a la Sección #1

Para aplicar la funcionalidad, usaremos código CSS y JQuery personalizado. 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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* 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 Anime JavaScript usando etiquetas de script como puede ver en la pantalla de impresión a continuación . Usaremos esta impresionante biblioteca para crear el efecto de escalonamiento en el próximo 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 funcionan con el siguiente código JQuery. Asegúrese de colocar este código entre las etiquetas de script, como puede ver en la pantalla de impresión a continuación.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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 «/* */» al principio y al final de la clase. Habilitar esta clase (en combinación con algún código JQuery que ya está habilitado) garantizará 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 en el generador de encabezados y 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 hamburguesas animado personalizado. Tan pronto como un visitante hace clic en el ícono de la hamburguesa, aparece un menú de pantalla completa y revela los elementos del menú uno por uno, lo que da como resultado una experiencia de usuario hermosa. ¡También pudo descargar el archivo JSON de la 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.

Publicaciones relacionadas:

  1. Cómo agregar animaciones de texto avanzadas dentro de Divi con Letterize.js y Anime.js
  2. Cómo agregar y animar su logotipo SVG dentro de su encabezado global con Divi’s Theme Builder y Anime.js
  3. Cómo crear una animación de desplazamiento de fondo de texto colorido con Divi
  4. Cómo construir un sitio de membresía con Divi – Parte 1