submenu desplegable movil divi

Submenú desplegable en móvil en tema DIVI

Aquellos que utilizáis el tema DIVI en wordpress habréis comprobado que en dispositivos móviles todos los elementos del menú aparecen desplegados, por lo que el menú se hace en ocasiones muy extenso. Para solucionar este problema de diseño vamos a hacer que para ver los elementos de cada submenú sea necesario clicar sobre cada elemento del menú.

Si no os ha quedado claro a que nos referimos lo entenderéis con la siguiente imagen;

submenu desplegable divi

 

Para conseguir que los elementos de cada submenú no se vean en dispositivos móviles hasta que el usuario lo decida tenemos que insertar en la sección Agregar código al <body> (bueno para los códigos de seguimiento, tales como Google Analytics) que encontraréis dentro de;

Divi > Opciones del tema > Integration

el siguiente código:

<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>
<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>
Guardamos los cambios y refrescamos la página en el móvil. El aspecto debería ser:
submenu desplegable movil tema divi
submenu desplegable movil tema divi

Hosting

Sobre el Autor: Franky Martin (ADMIN)

Deja un comentario

Tu dirección de email no será publicada.

cinco × 3 =