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…
¿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 estos códigos:
/* 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) ) {
if ($(this).parent().hasClass('always-visitable')) {
$('<a class="hover-link"></div>')
.attr('href', $(this).attr('href'))
.on('click', function(e){ e.stopPropagation(); })
.appendTo($(this));
}
$(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>Ahora ve al menú Divi → Opciones del tema → General, y en la caja de abajo llamada CSS personalizado …
Añade lo siguiente:
/* Menu expandible Divi */
#main-header .et_mobile_menu .always-visitable {
position: relative;
}
#main-header .et_mobile_menu .always-visitable .hover-link {
position: absolute;
top: 0; left: 0; bottom: 0;
right: 60px; /* el area derecha sigue expandiendo o cerrando */Y llegamos al último paso…
Ve a Apariencia → Menús, en las Opciones de pantalla, activa la casilla de Clases CSS.
Ahora despliega cada menú que quieras que tenga el desplegable (que tenga submenús) y añade la clase CSS always-visitable en la nueva caja que acabamos de activar.
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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
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!
Cada elemento es clicable, no solo el +, si haces clic en el texto del elemento del menú se despliega/pliega igualmente 😉
¿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.
Para eso debes valerte de algún plugin que aplique condicionales a los menús, como If Menu https://ayudawp.com/menus-condicionales-en-wordpress/
Gracias Fernando 🙂
Buenas Fernando, ¿supiste resolverlo? Tengo el mismo problema y no doy con la clave. Muchas gracias
Hola Carlos, llego un poco tarde a tu comentario, pero justo me pasó lo mismo ahora…
Te dejo este enlace en el que indican como solucionarlo:
– https://techjourney.net/top-parent-level-not-clickable-not-link-to-page-on-divi-mobile-menu-with-collapse-nested-items/
Yo lo probé y funciona genial!
Espero te sirva de ayuda 🙂
Gracias, actualizada la entrada con el procedimiento mejorado 😉
Perfecto macho, en web´s con pocos desplegables no hace falta, pero en la mía con un montón de categorías, podía ser liante. Ahora se navega mucho mejor. Gracias Fernando.
Ya lo veo @pedrollinsbernaola:disqus Bien hecho
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
Eso depende de tu menú
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?
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.
Muchas gracias a los dos tanto Fernando por dejar el código mascadito como a Bazares online, la solución que diste fue perfecta, al menos para mis necesidades.
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?
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?
gracias
Buenas tardes Fernando, pero si ya tengo en el Body el código de Google analitics, se puede poner bajo eso
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
Funciona perfecto, lo he implementado y sólo he tendido que retocar cuatro estilos y ahora está perfecto. Mi única duda es si sería muy complicado hacer que cuando desplegas un submenú se pleguen el resto que están abiertos, o sea, en definitiva que sólo nos permita un único submenú desplegado.
Muchas gracias de nuevo.
Había probado con otros códigos que encontré en google y no funcionaban bien, pero este que nos das esta genial, los estilos super limpios.
Muchas gracias!
Gracias por comentarlo, me alegro que te haya servido
Hola Fernando y mil gracias por este estupendo aporte que implementé en mi web y ha estado funcionando a las mil maravillas. Sin embargo, hace unos días detecté que ya no puedo clicar en el signo «+». Me explico: antes había dos zonas clicables, una era el texto y otra el «+», que al pulsarlo desplegaba el submenú, pero ahora todo es una única zona y haga donde haga el click me lleva a la página padre y no se despliega el submenú.
Muchas gracias
Hola Manuel ¿instalaste algún plugin recientemente o actualizaste algún componente de la instalación?
Gracias por tu respuesta Fernando, sólo he actualizado plugins y tema, pero no he instalado nada.
¿Pudiste solucionarlo?
Hola, no he conseguido solucionarlo.
Hola Fernando!
Me ha servidor de ayuda. Comentarte que tengo tus 2 libros de Wordpress y son fantásticos!
Felicidades!
Muchas gracias Juan 🙂
Hola Fernando, gracias de antemano por este artículo. He querido implantarlo en mi web pero en el CCS final me sale «expected rbrace css at line 969,col 64» me puedes ayudar a solucionarlo, por favor. Sé que es error de sintaxis según investigué, pero si le ha funcionado a otras personas, no entiendo por qué me ha salido este error a mi.
Gracias de antemano.
Saludos
Hola! A mí me ha dado el mismo problema que a BAZARES ONLINE y al pie de página se muestra el texto:
/*Estilos para menú desplegable móvil Divi */ /* JS para menú plegable móvil Divi */
Además, al lado del signo de + me sale una letra c siempre o una d cuando despliego.
Qué puedo hacer?
Esas líneas son comentarios y se pueden quitar, lo del + y c no sé a qué puede ser debido la verdad. Yo lo tengo funcionando tal cual está en el tutorial y me funciona bien
Correcto! Eliminé los comentarios y conseguí quitar la C y D, están en el código y no sé por qué a mí me salían en el menú.
En la cuarta línea del código pone «#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’; }» Pues las letras que le siguen al número 4 las eliminé y magia, desaparecieron.
Lo dejo por aquí por si a alguien también le pasa que pueda eliminarlo.
Mil gracias Fernando, sois mi salvación muchas veces.
Gracias Estefanía por la respuesta la verdad es que me sirvio mucho, y descucbri que esos son para poner el icono en este caso < Son fuentes logre cambiarlas por cualquiera que este dentro de la fuente pueden ver aca la lista de simbolos solo deben reemplazar por el numero o letra asociado a la fuente, en mi caso utilice F y G
https://www.onlinewebfonts.com/download/9d25ea5c587d0f9d470aa9a3634735ea
espero le sirva a alguien más, el enlace tiene una vista previa no es necesario que descarguen la fuente, ahora el que la quiera instalar es libre de hacerlo, saludos
Fernando muchas gracias, he conseguido instalarlo y todo bien menos que me sale el texto del menú en ingles «select page». ¿Habría alguna manera de cambiarlo?
Muchas gracias por todo.
Mira a ver esto: https://ayudawp.com/cambiar-texto-menu-movil-divi/
Parece que es un problema de wordpress, que no me deja cambiar el idioma a Español, pero desactivando traducciones en divi he conseguido que todo vuelva a la normalidad.
Gracias.
Gracias Fernando por este tutorial, es maravilloso. De verdad, no sabes lo que nos ayudas.
Y gracias, Eduardo. Gracias al enlace que has puesto, he modificado los iconos en el código de Fernando.
Un saludo!