Tutorial Divi: Menú móvil desplegable, extensible y plegable

Publicado por Fernando Tellado el 13 Mar, 2018

Uno de los errores más comunes de usabilidad es ofrecer menús eternos que, cuando se visualizan en un dispositivo móvil, simplemente no se pueden utilizar, por su enorme extensión.

Y es que cuando nos ponemos a crear menús de navegación tendemos a pensar y visualizar los menús desde nuestro ordenador de escritorio.

Y sí, quedan muy bonitos y tal, con montones de submenús, submenús de menús, mega menús y montones de personalizaciones. Ahora bien, cuando los visualizas en un móvil resulta que dejan de tener utilidad alguna, y ofreces algo tan inútil como esto…

menu divi movil

¿No sería mejor ofrecer un menú, plegado por defecto, que pudiese el usuario desplegar a voluntad?

Esa es la idea.

Menú plegable / desplegable móvil en Divi

Si quieres ofrecer un menú que sea plegable y desplegable, solo tienes que añadir un poco de código.

Ve a Divi > Opciones del tema > Integración > Agregar código al <body> e insertar este código:

/* Estilos para menú plegable móvil Divi */
<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>
/* JS para menú plegable móvil Divi */
<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>

/* Estilos para menú plegable móvil Divi */

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

/* JS para menú plegable móvil Divi */

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

Esta combinación de estilos CSS y JavaScript convertirán tu infumable menú eterno en móviles en algo mucho más fácil de usar, y desplegar, algo así…

Por defecto, el menú marcará los elementos padres de la navegación con un símbolo + a su lado a visualizarlo en un dispositivo móvil que, al pulsarlos, desplegará los submenús.

Al pulsar en el icono x se volverán a plegar.

Mucho más útil, fácil de usar.