Cómo insertar un menú desplegable para móviles en DIVI – Fácil y rápido
El nacimiento de WordPress
Tras el gran impacto que estaban teniendo los blogs, principalmente Blogger tras haber sido adquirido por Google en 2003, fue lanzado, en ese mismo año, WordPress.
Éste es denominado como gestor de contenido, focalizado la creación y diseño de páginas web. Al día de hoy, aún es considerada como herramienta fundamental para este tipo de trabajos, sobre todo en el plano comercial.
El complemento Divi
Por muy útil que puede llegar a ser WordPress, no es un secreto que quienes tienen mayor dificultad para manejar este tipo de plataformas y crear paginas web son las personas que no poseen conocimientos de HTML y CSS.
Divi es una herramienta que viene a ayudar, precisamente, a aquellas personas que tienen una capacidad de manejo escaso en cuanto a WordPress, de manera que pueda instruirse poco a poco y aprender a manejar óptimamente ésta plataforma.
Para quienes ya poseen conocimientos de WordPress, es una opción mucho más fácil al momento de diseñar las entradas en su blog o página web.
Menú desplegable
Al momento en que ingresas a Divi desde tu teléfono móvil, ésta plataforma, así como la gran mayoría de páginas web, ofrecen una vista distinta a la de escritorio. Esto hace que, en caso que contar con algún menú en la página web que estás desarrollando, se convierta en algo muy extenso y opaque el resto del diseño que has elaborado.
¿Cuál es la solución?
Lo primero que debes plantearte es qué solución deseas adoptar. Cuando se trata de menús desplegables, lo más recomendable es que los submenús no se desplieguen hasta que el visitante de la página web lo solicite. De esta manera, la experiencia del usuario en la visita será más acogedora.
Si es esa tu intención, hay una serie de códigos que tan solo debes copiar y pegar en Divi para solventar esta problemática bridando una interfaz mucho más agradable a la vista de los que puedan estar visitando tu página web.
El código a utilizar
La codificación necesaria para modificar la manera que se despliega el menú es algo extenso, pero efectivo. Ingresa a las opciones de tema de Divi, luego a Integration, copia y pega 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>
Otras alternativas para optimizar
Entre el resto de los códigos que son recomendables utilizar, se encuentra el que permite cerrar el menú. Si el usuario que está visitando tu página web no encuentra lo deseado dentro del menú y los submenús desplegables, debería poder cerrarlo.
En caso contrario, el despliegue del menú podrá opacar la vista del resto de la página web. Y tomando en cuenta que esté navegando desde el teléfono móvil, lo más seguro es que esté opacando la totalidad de la página. Si deseas eliminarlo, procede a copiar y pegar el siguiente código:
/* Cambia el menu a X cuando está abierto */
.mobile_nav.opened.mobile_menu_bar:before {
content: ‘\4d’;
}
Ahora que ya sabes cómo insertar un menú desplegable para móviles en Divi solo te resta conocer y aprovechar al máximo los mejores plugins de WordPress para llevar a la cima la creación de tus páginas web.
