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-menús 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.
Encontramos 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-menús de modo que al hacer clic en una página padre solo se desplegaba el sub-menú 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 menú 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-menú 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).
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
Comentarios recientes