Cómo crear un menú push deslizable hacia abajo (slide down push menu) en Divi sin plugins

De vez en cuando, me gusta darme una vuelta por el blog de Elegant Themes. Navegando por sus publicaciones, me encontré con este tutorial interesante y quise replicarlo para nuestro canal de YouTube, obviamente al estilo OV DIVI.

En este tutorial gratuito, vamos a construir un menú «push» deslizable hacia abajo o en inglés slide down push menu (ver demo). Este menú lo vamos a crear desde cero completamente con el Theme Builder o generador de temas de Divi.

Sabemos que cuando tenemos muchos enlaces de navegación en nuestro header, es un poco difícil ordenarlos debido a la gran cantidad de espacio que pueden ocupar. Por eso, en este tutorial vamos a jerarquizar nuestro header con un menú principal y un menú secundario que se desplaza al hacer clic en un icono de hamburguesa. Este menú es un poco diferente; no es un tipo de menú hamburguesa que al abrirlo tapa la información de la página. Más bien, este menú es super útil si quieres seguir mostrando los elementos de tu web al abrirlo. Con un efecto de desplazamiento hacia abajo, este menú recorre el contenido de la página para que siga siendo visible.

En este tutorial iremos paso a paso hasta lograr este magnífico resultado.

A continuación, te dejo los fragmentos de código que vamos a utilizar para lograr la estructura del menú y, sobre todo, la funcionalidad. No te preocupes, tú solo tienes que copiar y pegar los códigos cuando yo también lo haga en el video.

¡Vamos a ello! 💪

1. Código CSS para ajustar la altura de la sección Push Menú en vista tableta y móvil:

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

2. Código CSS dentro de la fila para alinear las columnas en vista escritorio:

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

3. Código CSS dentro de la fila para alinear las columnas una abajo de otra en vista tableta y móvil:

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

4. Código CSS para centrar el contenido de la columna tanto vertical como horizontalmente:

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

5. Código CSS para centrar verticalmente las columnas dentro de la fila:

display:flex;
align-items:center;

6. HTML para agregar el icono hamburguesa:

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

7. Código CSS estilos generales:

/* Mantener fijo el header al hacer scroll */
header {
  position: sticky;
  top:0;
  z-index:9999;
}
#page-container {
  overflow-y: visible !important;
}

/* Estilos menú hamburguesa */
.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;
}

7. Código jQuery para la funcionalidad del menú hamburguesa (importante tener esta configuración en divi performance):

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