Nuestras promociones de aniversario se acaban en:  

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Seleccionar página

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 y mejorar la UX en móvil

Por Jefferson M.

Dic 29, 2020

Accede a más de 500 recursos siendo PREMIUM

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con 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: 4 minutos

Con este tutorial lograrás este resultado:

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

¿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á!

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

2 Comentarios

  1. Avatar

    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?

    Responder
    • Jefferson M.

      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.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos