Divi Mobile Menu Collapsed

Divi Mobile Menu Collapsed

Vi segnalo questo interessante articolo presente sul sito di eleganthemes dove viene spiegato come raggruppare i sottomenu nel menu mobile.

Di default Divi non prevede il raggruppamento nascosto delle voci di sottomenu (nel menu mobile) e a volte questo può essere comodo se si hanno tante voci sotto i menu principali.

Mi chiedevo anch’io se non esistesse qualche featured già predisposta e come per magia proprio di recente elegant themes ha scritto questo articolo (datato maggio 2016)

Ecco qui il link per accedere all’articolo:

Divi Mobile Menu Hack: Collapsing Nested Menu Items – Divi Nation Short

Qui invece per comodità appunto il codice da inserire nel CSS e nell’header del template:

CSS che aggiunge l’effetto collapse:
/*collapse menu*/
#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; }

Javascript per il funzionamento collapse:

(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);

Francesca

1 commento finora

Freddy Scritto il17:33 - 12 Ottobre 2017

Ciao, anche io ho trovato questo codice molto utile.
Ho riscontrato un problema però: le voci del menu che hanno sotto pagine (che compaiono con il +), non sono cliccabili. Come si può cambiare il codice affinchè anche queste si possano cliccare?
La situazione ideale sarebbe, clic sul + si apre il sotto menu, clic sul resto della riga si apre la relativa pagina.

Chiedo tanto lo so!

Lascia un commento

uno × tre =

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

©2022 AGANIS WEB SOFTWARE di Francesca Roccabruna | P.IVA TRENTO 02183500228 - N.REA 205930
contatti | cookies | Privacy Policy