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

por | 23 Jun, 2017 | DIVI | 0 Comentarios

Divi es un tema flexible y potente, pero como todos los temas, a medida que vas trabajando siempre encuentras algún pequeña carencia que con algo de trabajo tratas de solventar. En este caso la falta de un menú colapsable.

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.

Esta falta de funcionalidad es más acusada si vemos la web desde un dispositivo móvil, forzándonos a deslizar la pantalla hacia abajo para ver todo el contenido del menú.

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.

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

 

/*Código CSS menú colapsable*/

<style type="text/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; }
</style>

/*Código Java script menú colapsable*/

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

Modificar iconos del menú colapsable

Si quieres modificar los iconos de apertura y cierre del menú colapsable, puedes modificarlos variando los siguientes códigos:

“Icono de apertura”

content: '\4c';

“Icono de cierre”

content: '\4d';

Para seleccionar unos iconos diferentes puedes navegar hasta la siguiente url:

https://www.elegantthemes.com/blog/resources/elegant-icon-font

Con el ratón encima del icono, se mostrará el código que debes coger y sustituir en cada caso para mostrar ese icono en concreto.

Si necesitáis más datos acerca del tutorial os remito a la fuente del post original en el blog de Divi.

https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items   (Afiliado)

0 comentarios

Enviar un comentario

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

Divi WordPress Theme
Diseñador WordPress-Madrid diseño web adaptable

Suscríbete al Newsletter

Unete a la comunidad del blog y recibe en tu email consejos y trucos para mejorar y hacer crecer tu web.

¡Te has suscrito correctamente!

Pin It on Pinterest

Shares
Share This