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 este código:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | /* 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.
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
