Cómo crear un menú push deslizante hacia abajo en Divi

Los encabezados grandes con muchos enlaces de navegación pueden ocupar mucho espacio valioso en su sitio (especialmente en la mitad superior de la página). Es por eso que los menús emergentes y deslizables son cada vez más populares. La mayoría de las veces, los menús que se deslizan hacia adentro para ver permanecen sobre el contenido de la página, ocultando ciertos elementos. Sin embargo, un menú push deslizante funciona de manera un poco diferente. El efecto de empuje deslizante es único en el sentido de que el menú se desliza desde la parte superior de la página al mismo tiempo que empuja el contenido de la página hacia abajo para que nada quede oculto a la vista.

En este tutorial, le mostraremos cómo crear un menú push deslizante desde cero utilizando Divi Theme Builder. Una vez construido el menú, se convierte en una herramienta versátil para todo tipo de aplicaciones ya que podrás llenar la sección con cualquier contenido que desees usando Divi Builder.

¡Hagámoslo!

Vistazo

Aquí hay un vistazo rápido al menú push deslizante que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo 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!

Para importar el diseño de la sección a su Divi Theme Builder, navegue hasta Divi Theme Builder.

Haga clic en el icono de portabilidad.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, la plantilla de la sección aparecerá en Divi Theme Builder.

Vayamos al tutorial, ¿de acuerdo?

Creación del menú push deslizante con Divi Theme Builder

Creación de un nuevo menú global

Para crear el menú, crearemos un nuevo encabezado global dentro de Divi Theme Builder.

Vaya a Divi> Creador de temas.

Luego haga clic en el área "Agregar encabezado global" dentro de la plantilla de sitio web predeterminada. En el menú desplegable, seleccione "Crear encabezado global".

Esto lo llevará al editor de diseño de encabezado global.

Una vez que esté en el Editor de diseño de encabezado global, elija la opción “Construir desde cero.

Creación del menú push

El primer elemento que construiremos juntos es la sección del menú push. Esta sección contendrá los elementos del menú que se alternarán hacia arriba y hacia abajo al hacer clic en el botón de alternancia del menú.

Configuración de la sección

Abra la configuración de la sección predeterminada y actualice la configuración de la siguiente manera:

Fondo

• Color de fondo: # 1a1e36

Relleno

• Relleno: 0px arriba, 0px abajo

Clase CSS

En la pestaña avanzada, agregue la siguiente clase CSS que se utilizará más adelante en nuestro código JS.

• Clase CSS: et-push-menu

CSS personalizado (tableta)

A continuación, necesitamos ajustar la altura de la sección en el móvil usando una altura calculada para acomodar la barra de encabezado principal que agregaremos. Básicamente, esto hará que la sección abarque toda la altura de la ventana en el dispositivo móvil cuando el usuario abra el menú.

Agregue el siguiente CSS personalizado al elemento principal solo en la tableta:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

Agregar fila 1

Una vez finalizada la configuración de la sección, cree una fila de una columna dentro de la sección.

Configuración de la fila 1

Luego actualice la configuración de la fila de la siguiente manera:

Diseño

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 1280px
• Acolchado: 3vh arriba, 3vh abajo
• Ancho del borde inferior: 1 px
• Color del borde inferior: rgba (255,255,255,0.2)

CSS personalizado

En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:

Debajo del escritorio ...

display:flex;
justify-content:center;
align-items:center;

Debajo de la tableta ...

display:flex;
flex-direction:column;
align-items:center;

Configuración de columna

Una vez finalizada la configuración de la fila, abra la configuración de la columna y agregue un fragmento de CSS personalizado al elemento principal:

display:flex;
align-items:center;
justify-content:center;

Esto centrará el contenido de la columna tanto vertical como horizontalmente.

Agregar botón

Ahora estamos listos para comenzar a agregar nuestros elementos de menú usando módulos de botones. Comience agregando un nuevo botón a la columna.

Configuración de botones

Luego actualice la configuración del botón de la siguiente manera:

Contenido

• Texto del botón: Diseño
• URL del enlace del botón: # (reemplácela con su propia URL personalizada más adelante)

Diseño

• Color del texto del botón: #ffffff
• Ancho del borde del botón: 0px
• Fuente del botón: Montserrat
• Peso de la fuente del botón: Pesado
• Icono de botón: [tu elección]
• Ubicación del icono del botón: Izquierda

Duplicar la columna

Ahora, para crear los botones adicionales para el menú, podemos duplicar la columna. Para este diseño, dupliquemos la columna 4 veces para obtener un total de 5 elementos / botones de menú. en una fila de cinco columnas.

Agregar fila 2

Una vez que se completa la primera fila, estamos listos para agregar otra fila de botones que se pueden usar para un conjunto diferente de elementos del menú.

Para crear la siguiente fila, duplique la fila 1.

Eliminar todas las columnas excepto una

Luego elimine todas las columnas excepto una dentro de la fila duplicada.

Configuración de la fila 2

Actualice la configuración de la Fila 2 de la siguiente manera:

• Ancho máximo: 1080px
• Ancho del borde inferior: 0px

Configuración de columna

Luego agregue un borde a la columna de la siguiente manera:

• Ancho del borde derecho: 1 px
• Color del borde derecho: rgba (255,255,255,0.2)

Actualizar la configuración del botón

Una vez que la columna tenga el borde derecho, abra la configuración del botón y actualice lo siguiente:

• Tamaño del texto del botón: 14px
• Espacio entre letras del botón: 2px
• Peso de la fuente del botón: Semi negrita
• Estilo de fuente del botón: TT
• Mostrar icono de botón: NO

Duplica la columna

Al igual que hicimos antes, dupliquemos la columna para crear botones y columnas adicionales. Para este diseño, dupliquemos la columna 3 veces para obtener un total de 4 botones en una fila de 4 columnas.

Eliminar el borde de la última columna

Como no queremos que la última columna tenga el borde derecho, abra la configuración de la columna 4 y actualice el ancho del borde:

• Ancho del borde derecho: 0px

Creación de la barra de encabezado principal

A continuación, crearemos la sección para la barra de encabezado principal. Esta barra de encabezado permanecerá visible siempre y será lo que contenga el logotipo de nuestro sitio, un CTA y nuestro botón de alternancia de menú.

Agregar sección

Antes de agregar la nueva sección, es una buena idea actualizar la etiqueta de la sección anterior para que diga "Sección de menú push".

Luego crea una nueva sección debajo de la primera sección.

Configuración de la sección

Ahora actualice la etiqueta en la nueva sección para leer "Sección de encabezado". Luego abra la configuración de la sección y actualice lo siguiente:

Relleno

• Relleno: 0px arriba, 0px abajo

Añadir fila

Una vez que se haya agregado el relleno de la sección, agregue una fila de tres columnas a la sección.

Configuración de filas

Abra la configuración de la fila y actualice lo siguiente:

Dimensionamiento

• Ancho de la canaleta: 1
• Ancho: 90%
• Alto: 70px

Relleno

• Acolchado: Acolchado: 0px arriba, 0px abajo

CSS personalizado

En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal:

display:flex;
align-items:center;

Esto centrará verticalmente las columnas dentro de la fila.

Agregar botón

Para crear el CTA principal en la sección del encabezado, podemos usar un botón de la segunda fila en la sección superior. Copie el botón de la columna 1 en la fila 2 de la sección superior y péguelo en la columna 1 de la fila en la sección del encabezado.

Actualizar la configuración del botón

Luego abra la configuración del botón para el botón duplicado y actualice lo siguiente:

• Texto del botón: Registrarse
• Tamaño del texto del botón: 14px
• Color del texto del botón: # 1a1e36
• Mostrar icono de botón: SÍ
• Icono de botón: flecha derecha (ver captura de pantalla)

Agregar logotipo

En la columna del medio, agregue un módulo de imagen. Así será como añadiremos el logo del sitio de forma dinámica.

Coloca el cursor sobre el cuadro de la imagen y haz clic en el ícono "Usar contenido dinámico". En el menú desplegable, seleccione "Logotipo del sitio".

Configuraciones de imagen

Luego, en la pestaña de diseño, actualice lo siguiente:

• Alineación de la imagen: centro
• Altura máxima: 55px

Agregar icono de hamburguesa personalizado

Podríamos usar un ícono normal a través de un módulo de propaganda como alternar nuestro menú, pero para este tutorial, pensé que agregaríamos un menú personalizado con un efecto de transición genial.

Agregar módulo de texto

Para crear el icono de menú, usaremos un módulo de texto con algo de HTML personalizado que se estilizará con CSS externo.

Continúe y agregue un módulo de texto a la columna 3.

Agregar HTML del módulo de texto

Luego agregue el siguiente HTML al contenido del módulo de texto:

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

Fondo

Dale al módulo de texto un color de fondo:

• Color de fondo: # 1a1e36

Diseño de texto

Luego actualice la configuración de diseño de la siguiente manera:

• Ancho: 70px
• Alineación del módulo: derecha
• Alto: 70px
• Relleno: 20 px arriba, 20 px abajo, 16 px a la izquierda, 16 px a la derecha

Clase CSS

En la pestaña avanzada, agregue la siguiente clase CSS:

• Clase CSS: et-push-menu-toggle

Agregar código

Para traer a casa la funcionalidad que necesitamos para que funcione este menú push deslizante, agregaremos nuestro CSS personalizado y jQuery a un módulo de código.

Continúe y agregue un módulo de código a la columna 3 debajo del módulo de texto.

Luego pegue el siguiente código (importante: envuelva este código en etiquetas de estilo para que funcione correctamente):

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    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;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

A continuación, copie y pegue este código directamente debajo de él (importante: envuelva este código en etiquetas de secuencia de comandos para que funcione correctamente):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

Actualizar el texto y los enlaces del botón

Finalmente, podemos actualizar todos los botones con el texto de botón necesario y las URL de enlace.

¡Eso es todo!

Guardar ajustes

No olvide guardar el diseño y la configuración del generador de temas.

Resultado final

Para ver el resultado final, consulte una página en vivo en su sitio.

Haciéndolo pegajoso

Si desea una versión "adhesiva" del menú, todo lo que necesita hacer es agregar el siguiente fragmento de CSS al módulo de código (entre las etiquetas de estilo ):

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

Y aqui esta el resultado.

Pensamientos finales

Espero que disfrutes de este menú push deslizante. El efecto es único y abre la puerta a encabezados más creativos en el futuro.

Espero tener noticias tuyas en los comentarios.

¡Salud!