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

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>

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(15 votos, promedio: 4.9)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

17 comentarios en “Tutorial Divi: Menú móvil desplegable, extensible y plegable”

  1. Hola Fernando

    Totalmente de acuerdo.

    Uno de los grandes problemas que me encuentro con los menús móviles, que si tienes un desplegable en una página, el primer elemento no es clicable, sino que al pulsarlo te abre el desplegable, impidiendo al usuario a través del menú acceder a la página de ese elemento.

    Por ejemplo:

    Inicio
    Sobre mí
    Servicios +
    – Diseño Web
    – SEO
    – …
    Blog
    Contacto

    Si has diseñado una página para Servicios donde cuentas algo, desde un móvil muchas veces no se puede acceder, solo a las páginas del desplegable.

    ¿Este código permite que ese elemento se clicable? ¿Y que solo se despliegue si pulsas en el + por ejemplo?

    ¡Gracias!

    1. Bazares onLine

      ¿Existe alguna manera de añadir elementos a los menús que únicamente se vean en móvil?, si la hubiera se podría añadir la liga del elemento no clicable como una opción más.

  2. Rubén Sánchez

    Hola Fernando, enorme artículo. Me has ayudado mucho.
    Quería hacerte una pregunta, al poner el código, la «categoría padre» de donde cuelgan las distintas subpáginas, ya no se puede clickar. Hay alguna opción para que sea clickable. Por ejemplo, siguiendo el ejemplo del compañero anterior:
    Inicio
    Quienes somos
    Servicios
    seo
    sem
    social ads.
    etc

    La página de servicios sea clickable y te vaya a la página de servicios, y que no se despliegue. Que solo se despligue si pinchas en el icono +, no el texto.
    Gracias y saludos.

    Rubén

  3. Hola amigos tengo el mismo problema.
    Al agregar el codigo, al igual que lo vi en youtube. el PARENT, se vuelve noclickeable. Todo el tag se transforma en un elemento desplegable.

    Un ejemplo:

    Menu padre- «Nosotros(Pagina deseablemente clickeable pero se deshabilita)»
    Submenu – «nuestros compromisos» (pagina clickeable y desplegable sin problema)

    Mi problema es con el el menu padre, que antes podias acceder a este link pero una ves que lo conviertes en desplegable, creo que el problema radica en esta parte:

    if ( $(this).is(top_level_link) ) {
    $(this).attr(‘href’, ‘#’); donde # pasa a ser el nuevo link del padre para todos las paginas padre desplegables.

    Alguien pudo solucionarlo?

    1. Bazares onLine

      Yo tenía la inquietud de eliminar link en el Parent para no tener que crear una página que explicara las categorías de los subelementos y los visitantes eligieran ir directo a ellos.

      Al encontrar éste post sobre la opción del menú colapsable y enterarme de que el Parent deja de ser clicable, se me ocurrió añadir el Parent como Enlace personalizado en el menú, pero sin Link e incluir como subelemento destacado lo que algunos mencionan que tienen como categoría Parent. De ese modo tengo por ejemplo:

      FAQ Y CONDICIONES como Enlace personalizado sin link y sin la obligación de crear una página donde tenga que explicar algo sobre las 2 subcategorías y añadir los links hacia ellas.

      Luego como subelementos sí con link:

      FAQ
      CONDICIONES DE USO DEL SITIO

      El Parent sigue funcionando perfecto en el Hover para desplegar los subelementos y al menos para mí fue la solución ideal.

  4. Bazares onLine

    Hola, yo tengo la situación de que al final, hasta abajo del pie de página se muestra el texto:

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

    ¿Habré hecho algo mal?

    ¿Se puede corregir sin afectar la función?

  5. Diego Gabrielli

    Hola, muy interesante y es lo que estaba buscando, pero en el menú desplegable tengo un item (enlace ancla) que dirige a un punto inferior de la misma página, pero el menú desplegable queda desplegado, necesitaría que se cierre al igual que los otros enlaces que llevan a otra página… se que tiene que llamar a una función pero no se como resolverlo… podrías ayudarme?

  6. Rodolfo Gutierrez Moron

    Buenas tardes Fernando, pero si ya tengo en el Body el código de Google analitics, se puede poner bajo eso

  7. Silvana Calduch

    Hola a todos! Tengo un grave problema! En mi menu Divi en el movil, al clicar el menu hamburguesa, (las 3 rayitas), me sale suuuuper estrecho en el movil, alguien sabe porque me pasa esto y como puedo arreglarlo?
    Esta alineado a la derecha

Deja un comentario

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

 

Ir arriba Ir al contenido