Como dice el título de la publicación… esto es una publicación en la que vamos a explicar como añadir al menú del tema Divi la posibilidad de que los elementos del menú que contengan sub-menus sea desplegable (con este código solo se convertirá en desplegable los elementos del menú que contengan la clase desplegable de modo que hay que añadirla manualmente)

Esta publicación no va a ser muy extensa puesto que esto es solo una extensión de una información que ya se ha dado en otros sitios web y hay que empezar hablando del famoso tema DIVI… Es un tema de Wordpres muy versátil y sirve para crear multitud de sitio web pero de momento tiene un problema en el aspecto que presentan los menús.

Es muy bonito en la versión de escritorio y en la versión móvil cuando tenemos un sitio web con pocas páginas pero cuando una web tiene muchas categorías y sub-categorías los menús se vuelven poco atractivos. Este problema es mucho más acusado en la versión móvil de modo que lo primero que hicimos fue buscar un código (que hubiese escrito alguien) para hacer que los menús se contrajeran y se pudiesen desplegar.

Plugin para elegir que submenu del tema divi es desplegableEncontramos un código válido que se escribió expresamente en varios sitios web para este tema en particular pero tenía un inconveniente… Convertía en desplegable TODAS las páginas que tuviesen sub-menus de modo que al hacer clic en una página padre solo se desplegaba el sub-menu en lugar de entrar en la página en cuestión.

En todos los sitios web que miramos encontramos el mismo código de modo que lo modificamos para que desplegara únicamente los elementos del menú que tuviesen la clase desplegable, de este modo podemos elegir que elementos del menu muestran el sub-menú abierto (y por lo tanto es clicable) y cuales quedan ocultos y plegados hasta el momento en que se hace clic sobre el elemento.

Continuamos con el problema de que no podemos entrar en la página que apunte el elemento que dispone de un sub-menu pero ahora podemos elegir cuales serán.

Para facilitar a los usuarios que quieran utilizar esta variante lo hemos escrito en un plugin que puedes descargar desde aquí: PLUGIN-SIAICA-MENU-DESPLEGABLE-DIVI

Hay que recordar que para que se vea la nueva funcionalidad desplegable hay que añadir la clase a voluntad, es decir… Cada elemento del menú que se quiera convertir en desplegable debe llevar esa clase aplicando esa funcionalidad e impidiendo que se pueda entrar en dicha página desde la versión móvil (a no ser que se mantenga pulsada y se abra en pestaña nueva).

Cómo añadir la clase desplegable al elemento del menú con submenús

Añadir la clase desplegable al elemento del menú con submenús

EL CÓDIGO DEL PLUGIN ES EL SIGUIENTE:


<?php
add_action('wp_head', 'css_para_menu_desplegable', 100);
function css_para_menu_desplegable() {
echo '
<style>
#main-header .et_mobile_menu .desplegable > a {
background-color: transparent; position: relative;
}
#main-header .et_mobile_menu .desplegable > a:after {
font-family: "ETmodules";
text-align: center;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
position: absolute;
}
#main-header .et_mobile_menu .desplegable > a:after {
font-size: 16px;
content: "\33";
top: 0px;
right: 10px;
}
#mobile_menu li {
padding: 5px 0 5px 0;
}
#main-header .et_mobile_menu .desplegable.visible > a:after {
content: "\4d";
}
#main-header .et_mobile_menu .desplegable ul.sub-menu {
display: none!important;
visibility: hidden!important;
}
#main-header .et_mobile_menu .desplegable.visible > ul.sub-menu {
display: block!important;
visibility: visible!important;
}
#mobile_menu ul.sub-menu {
margin-left: 15px;
}
</style>';
}

add_action('wp_head', 'js_para_menu_desplegable');
function js_para_menu_desplegable() {
echo '<script>
(function($) {
function setup_collapsible_submenus() {
var $menu = $("#mobile_menu"),
top_level_link = "#mobile_menu .desplegable > a";
$menu.find("a").each(function() {
$(this).off("click");
if ( $(this).is(top_level_link) ) {
$(this).attr("href", "#");
}
if ( ! $(this).siblings(".desplegable .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>';
}

Aquí dejo un par de referencias de donde sacamos el código que hemos reciclado para obtener un mejor control de sus funcionalidades

Publicaciones relacionadas anterior y posterior