En este tutorial premium aprenderás a diseñar un increíble menú hamburguesa fullpage dividido en dos secciones con el divi theme builder y lo mejor sin plugins 😍
Como primer paso vamos a diseñar un header el cual tendrá nuestro logo de lado izquierdo y el menú hamburguesa de lado derecho. Este menú hamburguesa será animado, es decir, al pasar el cursor sobre el icono, las tres «rayitas» que lo conforman empezarán a moverse y esto lo vuelve muy interactivo.
Una vez hagamos click sobre el icono hamburguesa se nos desplazarán dos secciones: una saldrá del lado izquierdo y la otra del lado derecho, estas secciones se mostrarán con un efecto de animación hasta encontrarse una con otra, realmente es un efecto genial 🤩
En la sección de la izquierda solamente tendremos una imagen de fondo, mientras que en la sección de la derecha tendremos los enlaces a nuestras páginas. Pero lo increíble es que al pasar el cursor sobre cada uno de los enlaces de las páginas, la imagen de la sección de la izquierda se irá reemplazando mientras que los enlaces de las páginas se remarcarán con un subrayado.
Obviamente no estamos limitados a esta composición ya que al ser un menú construido con el propio divi builder, podemos hacer uso de filas, columnas y cualquier módulo para lograr la composición que queramos.
Este tutorial es exclusivo y original de OV DIVI, así que es un ejercicio que vale completamente la pena 😍
¡Hola! Me encanta como queda el diseño de este menú. ¿Se podría hacer también una división horizontal para que apareciesen cuatro porciones?
¡Muchas gracias!
Hola Quique, muchas gracias a mi también me ha gustado mucho el resultado final 😀
Sobre tu consulta, ¿Cómo si fuera una ventana de «windows»? Es posible pero habría que modificar un poquito el código CSS para lograrlo, pero estoy 99% seguro que es posible 🙂
Hola Óscar, muy buen recurso como siempre.
Solo una cosa, cuando utilizo este menú, los enlaces tipo índice que se deslizan dentro de la página hacia otras secciones de la misma página dejan de funcionar. Parece que como el header ocupa el 100% de la altura, No se detecta bien el desplazamiento y no lleva a la sección deseada.
¿Sabrías alguna forma de solucionar esto?
Un saludo y muchas gracias por toda la información de la que provees.
Hola Alejandro qué tal, muchas gracias.
Sobre tu consulta, sí tengo una solución para eso. En mi página Divi Snippets tengo un código que justamente es para solucionar ese detalle. Lo encuentras en «Menú Theme Builder» > Solucionar posición de enlaces ancla en menú creado desde el Theme Builder…
Muchas gracias por la solución Óscar, funciona perfectamente.
¡Un saludo!
Excelente Alejandro, me alegra saber que te ha funcionado 🙂
¡Saludos!