En este tutorial de Divi te enseñamos a contraer o agrupar los submenús que tengas creados en un menú dentro de Divi. Esta mejora funciona especialmente bien en dispositivos móviles, colapsando los submenús de tu menú principal, logrando una gran estética y mejora en la experiencia de navegación a través de móvil en Divi.
Tiempo de lectura estimado: 4 minutos
Índice
Con este tutorial lograrás este resultado:
¿Cómo contraer o agrupar los submenús para móvil en Divi?
Una de las solicitudes más comunes acerca del menú de Divi es la posibilidad de contraer los elementos del submenú para que se vean de forma ordenada en móvil y además, generen una excelente experiencia de usuario. Así que hoy les mostraré lo que creo que es la mejor y más fácil forma de hacer esto. Este tutorial es posible gracias al código de Nelson Miller de peeayecreative.com que lo ha creado para hacernos la vida (incluyéndome) más fácil a todos.
Primero agregamos algo de JQuery para contraer los submenús
La idea aquí es cambiar el menú en móvil Divi de una lista gigante y que ocupa todo el espacio de la pantalla a una hermosa lista compacta. Podemos hacer esto agregando algo de código jQuery y CSS. Esto no solo colapsará el submenú del menú Divi en móvil, sino que también agregará algunos conmutadores (o botones) que indicarán al usuario que hay más elementos para mostrar en ese submenú al hacer clic.
El siguiente código puedes agregarlo en el archivo scripts.js de tu childtheme, o también en las opciones del tema Divi > Integraciones > agregar código al < head > de tu blog.
<script >
jQuery(function($) {
$(document).ready(function() {
$("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>');
$('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function(event) {
event.preventDefault();
$(this).parent('li').toggleClass('dt-open');
$(this).parent('li').find('ul.children').first().toggleClass('visible');
$(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
});
iconFINAL = 'P';
$('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
$('.mobile-toggle').on('mouseover', function() {
$(this).parent().addClass('is-hover');
}).on('mouseout', function() {
$(this).parent().removeClass('is-hover');
})
});
});
</script>Ahora añadiremos el código CSS para darle los estilos al submenú agrupado
Lo siguiente que debes hacer es agregar el código CSS al sitio web para darle los estilos necesarios y así contraer o agrupar los submenú.
Debes copiar y pegar el snippet a continuación en las opciones de tema de Divi > CSS personalizado para que se apliquen en todo el sitio web:
/* CSS para Submenu colapsado en Divi */
/*Ajustar el nuevo toggel del submenu*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
/*CSS para tener todo acomodado*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
/*Remover el background color de los items del submenu*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/*Colapzar submenu por defecto*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
/*Mostra el submenu cuando el toggle este abierto*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
/*Ajuste de los estilos del toggle*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}
/*Icono del toggle del submenu cuando esta cerrado*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: "ETModules";
content: '3';
color: #3665db;
background: #f0f3f6;
border-radius: 50%;
padding: 3px;
}
/*Icono del toggle del submenu cuando esta abierto*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
content: '2';
}
/*Agregar forma de punta cuando el submenu está abierto*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}
/*CSS de caja de menu y color del background*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
background-color: #ffffff!important;
border-radius: 10px;
}¡Y eso es todo!
Espero que este tutorial te sirva para mejor la experiencia de usuario en la navegación de tu sitios web, para usuarios que lo hacen desde móvil. Como ves, fue super sencillo contraer o agrupar los submenús para móviles y así lograr este poderoso efecto.
Tips adicionales
- ¿Quieres personalizar los posts de tu blog? Te dejamos este tutorial y un plugin totalmente gratis para que des un nuevo aspecto a tus entradas.
- ¿Te gustaría personalizar más los menú en Divi? checa este tutorial sobre divisores verticales: Cómo añadirlos al menú de Divi
- Te recomendamos también este tutorial donde te contamos como hacer el efecto parallax en móvil para el tema Divi
¿Ves que es facilísimo? ¡No te pierdas nuestros tutoriales premium para crear menús personalizados con theme builder de Divi acá!
Buenos dias maestro.
En la web https://vinodecantalia.com/ (ojo el problema es solo en la versión móvil) en la parte móvil (verás que tengo pegados un menú principal y un secundario) Me colapsa todo en una sola y tengo que desplegar… eso me puedo acostumbrar.
El problema me viene cuando quiero cambiar el nombre del secundario por uno que diga Categorías (y así distinguirlo del principal) me los cambia a los dos
¿Puedes ayudarme?
Ya lo vi. Lo que se me ocurre es que le des una clase diferente a cada menú, por ejemplo menu_1 y menu_2 y luego, al CSS donde estas aplicando el nombre del menú, lo dupliques y coloques cada uno a una clase diferente, de manera que se diferencien entre sí, porque seguro lo que está pasando es que en el CSS que estás metiendo estas aplicando el nombre para la clase del menú en general.
Hola! muy padre este tutorial, me gustó mucho. De ante mano muchas gracias, pero tengo una duda, ¿Cómo puedo lograr que el submenú se abra y cierre, no necesariamente dando clic en el símbolo? Ósea que pueda presionar en el texto inicialdel submenú y también se abra y cierre, sin tener que presionar obligatoriamente justo en el ícono. Espero y me explique, gracias!!
Qué tal José, se tendría que modificar el código en general de esta solución, pero ahora mismo estamos realizando otros contenidos, lo revisaríamos después y cuando tengamos alguna respuesta del cambio lo pondríamos.
Hola José ¿Encontraste la solución a tu pregunta? Estoy buscando resolver lo mismo que tú mencionas. Se agradece si tienes alguna recomendación. Saludos!
Hola, yo también tengo el mismo problema que José y Tania, es muy molesto que solo funcione pulsando sobre el símbolo y no sobre el texto, de hecho a los usuarios los lleva a error.
Jefferson, estaría genial si consigues darle solución. Yo no tengo ni idea de Javascript, que entiendo que es lo que hay que modificar. Saludos!
Que tal Francisco, así es, esto esta en cola de producción.
Hola Jefferson, Excelente post y tu canal de youtube, de otro planeta!
Tengo una duda: He creado el menu de mi blog a través del generador de temas de divi, y he seguido cada uno de los pasos que explicas en este post para contraer el menu y efectivamente se contrae.
Sin embargo, no me deja la opción de ver los submenus…habrá que hacer alguna modificación en el código?
A ver si me puedes dar algun tips para solucionarlo.
Gracias!
Que tal Felipe, para poder ayudarte tendría que ver el problema. Si tienes el enlace podría revisarlo.
Hola Jefferson,
Gracias por responder a mi inquietud.
Adjunto enlace.
https://docs.google.com/document/d/1D-o0eHa2HjgdDuTMqhqnuT2bGc07_VQULRB5HtcCzTk/edit
Cualquier cosa, me comentas.
Gracias, nuevamente. Felipe.
Que tal Felipe, seguramente te paste por alto alguno de los pasos, porque directamente no está haciendo la funcionalidad. También puede ser que haya algún conflicto de códigos o funcionalidades con Divi. Te recomiendo que revises bien el tuto, y también que revises esta guía donde explicamos como ver errores en Divi https://uxdivi.com/blog/guias/guia-para-solucionar-los-problemas-mas-comunes-en-divi
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Jefferson M. Con los submenú funciona correctamente, pero como haría para que funcione con la clase Mega-Menu ?
para ellos no funciona, hay alguna manera o codigo que me pueda apoyar con los Item de Clase Mega-Menu
Que tal Estimado. Me parece que no. Para mega menú el funcionamiento sería totalmente diferente y el código también.
Hola Jeff, realice todo el proceso pero tengo la siguiente novedad, en mi menu principal solo tengo una categoría que tienen submenú las demas son enlaces anclas dentro del sitio al realizar el proceso agrupa los menú y no muestra los submenú de la única categoría que le aplica, consulto todos los menú deben de tener subcategorías?, la web la tengo en construcción.
Qué tal Omar, no entiendo mucho el problema, si me puedes compartir enlaces o capturas de pantalla me serviría.
Hola Jefferson,
El tutorial esta muy bien.
Tengo dos preguntas por si puedes hacer un tutorial nuevo y responderlas.
1. ¿ si creas la cabecera del menu con ”Theme builder” funciona el codigo?
2. Cuando haces un menu principal con ”Theme builder” y quieres que sea transparente al estar fijo y cuando se mueva la pagina se quede opaco, no se como se puede hacer. ¿puedes hacer un tutorial? o explicar si existe codigo. Gracias
Un buen trabajo lo que compartes con nosotros.
¡Hola Natzan! Un gusto saludarte, muchas gracias por tu comentario, te comento acá la respuesta:
1. Si se crea el menú en el theme builder, si funciona el código.
2. Con este tutorial explicamos como hacer esto que necesitas: https://uxdivi.com/tutoriales-premium/theme-builder/menu-9-theme-builder-de-divi-menu-fijo-con-efecto-hover
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐