Cómo crear un simple menú móvil colapsable en Divi

Divi es un tema flexible y potente, pero como todos los temas, a medida que vas trabajando siempre encuentras alguna pequeña carencia que con algo de trabajo tratas de solventar.

Uno de los puntos flojos en cuanto a al diseño del menú en Divi, es que cuando creamos submenús, estos crecen en forma de una gran listado sin que haya forma alguna de ocultarlos.

Por una razón estética y funcional, sería más útil que estos se pudiesen ocultar y desplegar cuando lo necesitásemos.

Esto se nota más desde un dispositivo móvil porque para poder ver el menú completo tendremos que deslizar la pantalla.

Crea un menú colapsable en Divi en cinco minutos

Creando una más ordenado

Lo ideal es que según vallamos añadiendo más submenús al menú principal, estos queden alojados sin desplegarse y estos se muestren solamente al pulsar en el icono.

En esta imagen se puede ver como aquí, ya el menú organizado oculta una interminable lista que lo único que hace es entorpecer la navegación al visitante.

 

Como crear un menu colapsable en DIVI

Antes y después de crear el menú colapsable en Divi

 

Con un poco de código CSS y JS podemos solucionar este pequeño inconveniente. Para esto solo tenemos que navegar hasta opciones del tema en Divi, después vamos a integración y aquí activamos el botón código del cuerpo.

Una vez realizados estos pasos en la caja  “agregar código al body” agregáis los dos siguientes códigos; primero el css y justo debajo el código js. Ahora le damos a guardar.

Es muy importante que si tenéis algún plugin de cache activo borréis la cache después de terminar todos estos pasos y después refresquéis la página.

 

Opciones tema divi

 
 

Añade el código CSS y JS dentro del body y no olvides guardar los cambios

Primero añade el código CSS

Tienes que ir apariencia en wordpress, personalizar y aquí busca busca el cuadro para pegar CSS y aquí pegas el siguiente fragmento de código.

Código CSS
[css]
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: ‘ETmodules’; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: ‘\4c’; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: ‘\4d’; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
[/css]

Segundo, añade el código JS a la cabecera de tu blog

Tienes que ir hasta Divi, después ajustes del tema y por último pegarlo en recuadro “Agregar código al head de su blog”

[js]
<script type="text/javascript">
(function($) {

function setup_collapsible_submenus() {
var $menu = $(‘#mobile_menu’),
top_level_link = ‘#mobile_menu .menu-item-has-children > a’;

$menu.find(‘a’).each(function() {
$(this).off(‘click’);

if ( $(this).is(top_level_link) ) {
$(this).attr(‘href’, ‘#’);
}

if ( ! $(this).siblings(‘.sub-menu’).length ) {
$(this).on(‘click’, function(event) {
$(this).parents(‘.mobile_nav’).trigger(‘click’);
});
} else {
$(this).on(‘click’, function(event) {
event.preventDefault();
$(this).parent().toggleClass(‘visible’);
});
}
});
}

$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});

})(jQuery);
</script>

[/js]

Otras entradas

0 comentarios

Enviar un comentario

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

Acepto la política de privacidad necesario para comentar y para ser suscriptor del Newsletter si te quieres suscribir. *

Divi Oferta 25% de descuento, solo hasta el 21 del 12 de 2018 (67€ + IVA)