Tutorial Divi: Cómo colapsar el menú en móvil en Divi

En este tutorial de Divi te enseñamos a colapsar el menú en móvil en 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.

Í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 el 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á!