Tutorial Divi: Cómo contraer o agrupar los submenús en Divi

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: 3 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

¿Ves que es facilísimo? ¡No te pierdas nuestros tutoriales premium para crear menús personalizados con theme builder de Divi acá!

Artículos relacionados

Comentarios

  1. 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?

    1. 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.

  2. 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!!

  3. 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!

  4. 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!

        1. 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 😉🖐

  5. 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.

  6. 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.