¿Te gustaría crear un menú deslizante y push en DIVI que no oculta elementos de su página?
Los encabezados grandes con muchos enlaces de navegación pueden ocupar un espacio valioso en su Sitio web. Es por eso que los menús contextuales y deslizables son cada vez más populares. La mayoría de las veces, los menús que se deslizan para mostrarse permanecen encima del contenido de la página, ocultando ciertos elementos.
Sin embargo, un menú deslizante funciona de manera un poco diferente. El efecto de inserción deslizante es único porque el menú se desliza desde la parte superior de la página mientras se presiona simultáneamente el botón contenido desde la página hasta el final para que nada quede oculto a la vista.
En este tutorial, le mostraremos cómo crear un menú push deslizante desde cero usando Divi Theme Builder.
¡Vamos!
vista
Aquí hay un vistazo rápido al menú deslizante que crearemos en este tutorial.
Cree el menú de inserción deslizante con el generador de temas Divi
Crear un nuevo menú global
Para crear el menú, crearemos un nuevo encabezado global dentro del Divi Theme Builder.
Ve a Divi > Generador de temas.
Lea también: Cómo crear un encabezado global con formulario de inicio de sesión en DIVI
Luego haga clic en el área "Agregar un encabezado global" en el plantilla de sitio web por defecto. En la lista desplegable, seleccione "Crear encabezado global".
Creación del menú push
El primer elemento que vamos a construir juntos es la sección del menú de inserción. Esta sección contendrá los elementos del menú que se alternarán hacia arriba y hacia abajo cuando haga clic en el botón de cambio de menú.
Configuraciones de sección
Abra la configuración de la sección predeterminada y actualice la configuración de la siguiente manera:
Fondo
- Fondo: #1a1e36
Margen interno
- Margen interno: 0px superior, 0px inferior
Clase de CSS
En la pestaña avanzada, agregue la siguiente clase CSS que se usará más adelante en nuestro código JS.
- Clase CSS: et-push-menú
Añade la línea 1
Una vez que se definen los parámetros de la sección, cree una fila de una columna en la sección.
Parámetros de la línea 1
A continuación, actualice los parámetros de la línea de la siguiente manera:
apresto
- Usar ancho de canalón personalizado: SÍ
- Espacio entre columnas: 1
- Ancho máximo: 100%
- Ancho máximo: 1 píxeles
espaciamiento
- Margen: Superior 3vh, Inferior 3vh
frontera
- Ancho del borde inferior: 1px
- 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:
display:flex;
justify-content:center;
align-items:center;
Parámetros de la columna
Una vez definida 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.
Añadir un botón
Ahora estamos listos para comenzar a agregar nuestros elementos de menú usando el módulo Botón. Comience agregando un nuevo botón a la columna.
Consulte también nuestra guía sobre: Cómo crear un menú de navegación vertical en DIVI
Configuraciones de botones
A continuación, actualice la configuración del botón de la siguiente manera:
Contenido
- Texto del botón: Diseño
- URL del enlace del botón: # (reemplace más tarde con su propia URL personalizada)
Estilo
- Usar estilos personalizados para el botón: SÍ
- Color del texto del botón: #ffffff
- Ancho del borde del botón: 0 píxeles
- Fuente del botón: Montserrat
- Botón de luz suave: Pesado
- Botón de icono: SÍ
- Botón de icono: [Tu elección]
- Solo mostrar icono en el botón flotante: NO
- Ubicación del icono del botón: Izquierda
Columna duplicada
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.
Añade la línea 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 de menú.
Lea también: Cómo agregar un formulario de contacto a un encabezado global en DIVI
Para crear la siguiente línea, duplique la línea 1.
Eliminar todas las columnas excepto una
Luego elimine todas las columnas menos una en la fila duplicada.
Parámetros de la línea 2
Actualice los parámetros de la línea 2 de la siguiente manera:
- Ancho máximo: 1 píxeles
- Ancho del borde inferior: 0px
Parámetros de la columna
Luego agregue un borde a la columna de la siguiente manera:
- Ancho del borde derecho: 1px
- 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
- Botón de luz suave: texto en negrita
- Espaciado entre letras del botón: 2 px
- Estilo de copia de botón: TT
- Botón de icono: NO
Columna duplicada
Como 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 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 de la barra de encabezado principal. Esta barra de encabezado siempre permanecerá visible y será lo que contenga el logotipo de nuestro sitio, una llamada a la acción y nuestro botón de cambio de menú.
Agregar una 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 del menú de inserción".
Ver también: Cómo crear un encabezado global con Theme Builder en DIVI
Luego crea una nueva sección debajo de la primera sección.
Configuraciones de sección
Ahora actualice la etiqueta de la nueva sección para que diga "Sección de encabezado". Luego abra la configuración de la sección y actualice lo siguiente:
espaciamiento
- Margen interno: 0px superior, 0px inferior
Agregar una fila
Una vez que se establece el relleno de la sección, agregue una fila de tres columnas a la sección.
Configuraciones de línea
Abra el parámetro de fila y actualice lo siguiente:
apresto
- Ancho de canalón: 1
- Ancho: 90%
- Altura: 70px
espaciamiento
- Margen interno: 0px superior, 0px inferior
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 en la fila.
Añadir un botón
Para crear el CTA principal en la sección del encabezado, podemos usar un botón de segunda fila en la sección superior. Copie el botón de la columna 1 de la fila 2 de la sección superior y péguelo en la columna 1 de la fila de la sección del encabezado.
Actualizar la configuración del botón
Luego abra la configuración del botón duplicado y actualice lo siguiente:
- Texto del botón: Registro
- Tamaño del texto del botón: 14px
- Color del texto del botón: #1a1e36
- Botón de icono: SÍ
- Botón de icono: flecha derecha (ver captura de pantalla)
Agregar un logo
En la columna del medio, agregue un módulo Imagen. Así será como agregaremos dinámicamente el logotipo del sitio.
Pase el cursor sobre el área de la imagen y haga clic en el icono "Usar contenido dinámico". En el menú desplegable, seleccione "Logotipo del sitio".
Configuración de imagen
Luego, en la pestaña Estilo, actualice lo siguiente:
- Alineación de la imagen: centrada
- Altura máxima: 55 píxeles
Añadir un icono de hamburguesa personalizado
Podríamos usar un ícono regular a través de un módulo de diseño como un menú de alternancia, pero para este tutorial pensé que agregaríamos un menú de alternancia personalizado con un efecto de transición genial.
Añadir un módulo de texto.
Para crear el ícono de menú, usaremos un módulo de texto con código HTML personalizado que se diseñará con CSS externo.
Continúe y agregue un módulo de texto a la columna 3.
Agregar código HTML al módulo de texto
Luego agregue el siguiente código 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
Dar formato al texto
A continuación, actualice la configuración de estilo de la siguiente manera:
- Anchura: 70 píxeles
- Alineación del módulo: derecha
- Altura: 70px
- Margen interno: 20 px arriba, 20 px abajo, 16 px izquierda, 16 px derecha
Clase de CSS
En la pestaña avanzada, agregue la siguiente clase CSS:
- Clase CSS: et-push-menu-toggle
Agregar código
Para llevar a casa la funcionalidad que necesitamos para que este menú deslizante funcione, agregaremos nuestro CSS y jQuery personalizados 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 (NB: envuelva este código en etiquetas papa 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;
}
Luego copie y pegue este código directamente debajo (importante: envuelva este código en etiquetas de script 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 del botón necesario y las URL de enlace.
Está hecho !
Guardar configuración
No olvide guardar el diseño y la configuración de Theme Builder.
Resultado final
Para ver el resultado final, consulte la página en su sitio web.
hacer pegajoso
Si desea una versión "fija" del menú, simplemente agregue 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;
}
Aquí está el resultado.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Esperamos que disfrute de este menú de empuje deslizante. El efecto es único y abre la puerta a cabeceras más creativas. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
