Hola bienvenido a este nuevo tutorial dónde aprenderás a crear un hermoso menú hamburguesa con divi theme builder.
En este tutorial aprovecharemos el nuevo y potente generador de temas de divi para crear un menú totalmente diferente al que viene con divi por defecto. Este efecto consiste en que al dar click sobre el icono de hamburguesa se nos desplaza el menú de la parte superior con un efecto de movimiento. Además el icono de hamburguesa hace una transición a un icono en forma de equis (X) y haciendo click en este botón se volverá a ocultar el menú, la verdad me entretuve mucho haciendo este ejercicio, así que aprovéchalo.
Por cierto, si te estás preguntando si este menú es responsive, claro que es responsive, funciona tanto en computadoras, tabletas y móviles.
En el tutorial vamos a necesitar de unos fragmentos de código, no te preocupes me pase horas logrando realizar este efecto para compartirlo contigo y dejarte el código a continuación para que solo copies y pegues.
Este es el código del icono de menú hamburguesa (el de las rayitas):
<div id="iconoHamburguesa">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Aquí te dejo el código CSS general (icono hamburguesa):
.mover-icono {
top: 250px !important;
}
.desplazar-menu {
transform: translateY(0px) rotateX(0deg) !important;
}
.seccion-menu {
position: fixed;
width: 100%;
}
#iconoHamburguesa {
position: fixed;
top: 30px;
right: 40px;
width: 45px;
height: 45px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#iconoHamburguesa span {
display: block;
position: absolute;
height: 6px;
width: 100%;
background: #000000;
border-radius: 4px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#iconoHamburguesa span:nth-child(1) {
top: 0px;
}
#iconoHamburguesa span:nth-child(2),#iconoHamburguesa span:nth-child(3) {
top: 14px;
}
#iconoHamburguesa span:nth-child(4) {
top: 28px;
}
#iconoHamburguesa.open span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#iconoHamburguesa.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#iconoHamburguesa.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#iconoHamburguesa.open span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
@media only screen and (max-width: 768px) {
.mover-icono {
top: 20px!important;
}
.seccion-menu {
position: absolute;
margin-top: 65px;
}
#iconoHamburguesa {
position: absolute;
top: 20px;
right: -10px;
width: 35px;
height: 35px;
}
#iconoHamburguesa span {
height: 5px;
}
#iconoHamburguesa span:nth-child(2),#iconoHamburguesa span:nth-child(3) {
top: 11px;
}
#iconoHamburguesa span:nth-child(4) {
top: 22px;
}
}
Aquí tienes otro fragmento de código CSS que necesitamos pegar en la sección que contiene el diseño del menú:
transform: translateY(-100px) rotateX(-90deg); transform-style: preserve-3d; perspective: 2000px; transition: 0.3s;
Aquí tienes el código jQuery:
jQuery(document).ready(function( $ ) {
$('#iconoHamburguesa').click(function(){
$(this).toggleClass('mover-icono');
$(this).toggleClass('open');
$('.seccion-menu').toggleClass('desplazar-menu');
});
});
Me sale la hamburguesa de color negro. Y no consigo ponerla en blanco que es como la necesito. Hay forma?
Gracias
Hola Manolo claro que hay forma, en el código CSS busca estas clases: «#iconoHamburguesa span» y reemplaza dónde dice «background: #000000;» por «background: #ffffff;» sin las comillas obviamente.
Muchas gracias. Está muy chulo. Pero buscaré la forma de poner solo el menú hamburguesa y que las distintas opciones funcionen normalmente sin desplazar la pantalla. Quiero que sea tal como en el móvil… pero en el PC. Pero he guardado sus códigos para futuros proyectos. Muchas gracias.
Genial Manolo, seguramente más adelante te podrá servir. También tengo uno premium que te puede servir, aquí te lo dejo por si algún día quieres darle un vistazo.
Hola Óscar, te felicito por este tutorial, está muy chulo.
Tengo una duda: se puede poner un logotipo en el lado izquierdo de la página alineado al menú hamburguesa?
Muchas gracias por estos tutoriales, más adelante me suscribiré para poder ver los tutoriales premium.
Hola Armando muchas gracias.
Podrías crear una nueva sección con un módulo imagen y jugar con la posición fixed o absoluta desde Ajustes del módulo / avanzado / puesto…
Muchas gracias! Queda muy bien con las indicaciones que me has dado. Una última duda, es posible hacer desaparecer el contenido del menú hamburguesa abierto (y que la X se convierta de nuevo a las tres rayitas) cuando el usuario haga scroll.
Muy bien Armando.
Podría realizarse aunque deberíamos implementar otro tipo de jquery. Me encantaría ayudarte pero me llevará tiempo y en estos momentos ando ocupado con otras tareas. Si quieres puedes contratar mis servicios para que implemente la funcionalidad en tu sitio, o bien, esperar hasta cuando tenga tiempo disponible para poder practicar lo que deseas.
buenas noche hise todos los pasos dos veces y cuando selecciono las rayitas no me aparece el menu sino el codigo fuente mas abajo
nose que estoy haciendo mal
pero hice los pasos como tu dices en el video y nada
Hola Alexander seguramente se te está yendo un símbolo o signo. Eso pasa cuándo te hizo falta código o tienes un error de sintaxis. ¿Cuál es tu sitio?
Hola que tal chicos, como están?
Che chicos, no hay manera de poner el menú en el lado izquierdo ??
en el derecho jaajja no sé pero me parece hasta anti estético jaaajajja
si hay solución me avisan, les agradezco
Hola José, sí, por supuesto que es posible. Solamente busca en el código CSS el ID: #iconoHamburguesa y reemplaza right: 40px; por left: 40px;
Hola Oscar, una pregunta, se puede cambiar las tres rayitas del menú por un texto?
Muchas gracias por todo
Hola Armando, en el código HTML de las rayitas puedes borrar todos los span y colocarle un texto dentro de las etiquetas < p > TEXTO < / p> (borras los espacios de separación)
Hola Oscar, ayuda please, como puedo mover el menú hamburguesa, se me sale de la pantalla al lado derecho del todo queda fuera, cómo puedo moverlo para que quede como a ti.
Muchas gracias.
Hola Carlos, necesito ver tu sitio para poderte ayudar. ¿Cuál es la url?
Hola Oscar, una pregunta, tendrías el Json de este tutorial? Mil gracias
No amigo 🙁 he perdido todos los gratuitos
Geniales tus videos como siempre.
¿Cómo puedo hacer que al abrir el menú la X no se desplaze? Quiero que se quede en el mismo lugar que la hamburguesa. Gracias
Hola Maria, puedes borrar del código jQuery esta línea:
$(this).toggleClass(‘mover-icono’);
hola brother no se si es mi sitio o por que lo maqueto en local pero hice tus mismo pasos y antes de ocultar el menu con codigo aparece el icono y inicio etc y apenas lo oculto y le doy en el maqueteador builder le doy en las flechas aparece el codigo de div y cuando voy a ver como quedo en incognito aparece sin iconos y separados con espacios blancos super raro
Hola Diego, a ver compárteme la url de tu web amigo si es que todavía tienes este problema. Le daré un vistazo.
Saludos.
Hola Oscar;
Estoy metiendo un módulo deslizante de anchura completa con una única imagen de fondo. no sé en qué posición debo ubicar esa nueva sección para que no genere conflicto entre el menú y la imagen.
Cuando el menú está solo funciona perfectamente , pero con la imagen al darle click en la hamburguesa no aparece la x y el contenido en la versión de celular… Bueno he tenido problemas. Ya he hecho el ejercicio tres veces y aun no lo logré.
muchas gracias
Hola David, ¿Cuál es la url de tu ejercicio para darle un vistazo?
¡Genial! Es lo que estuve buscando. Lo que sí, me gustaría saber desde qué parte del código se podría cambiar el tamaño del menú hamburguesa, para que quede más pequeño.
¡Está excelente el tutorial, gracias por el código!
Hola Anibal para cambiar el tamaño del icono debes jugar con las propiedades CSS widht y height de #iconoHamburguesa.
También con el height: 6px; de #iconoHamburguesa span
Hola Oscar, en mi web (https://aldemedianoche.com.ar) el menu hamburguesa en cabecera no se despliega sobre el cuerpo de la public, busque por todos lados comparandolo con la web de un amigo que yo le hice donde sí funciona. Tuve el mismo prob en vista escritorio, pero me canse y elimine el sub-menú incorporándolo al menu princ. En vista Constructor Visual el menu se despliega (en el «mundo real» no) pero se advierte que el ancho del menu al desplegarse es apenas más ancho que el icono hamburguesa, con las elementos del menu desbordando el ancho. Si pudieras darme una manito, muy agradecido..
muchas gracias
Hola Juan Carlos, disculpa estaba de vacaciones por unos días. He vuelto pero no ya no logro ver tu página en línea, me arroja un error al entrar a la url
Hola! Excelente tutorial! te hago una consulta, el menú de hamburguesa me funciona perfecto en desktop pero en mobile no me queda fijo en la posición. Cuando hago scroll, se mueve con el resto de la página. No logro encontrar en el css como ajustarlo.
Espero me puedas ayudar, muchas gracias!
Hola Lucas, solamente entra a los ajustes de la sección / Avanzado / Puesto y selecciona fixed o fijado…