In Divi Tema WordPress come posso creare un menu mobile con la possibilità di chiudere e aprire i menu secondari?
Ecco cosa intendo:
STATO DI CHIUSURA DEI SOTTOMENU:
e STATO DI APERTURA DEI SOTTOMENU:
Grazie!
Ecco come farlo in 3 fasi:
FASE 1:
Creare un nuovo file menu.js e mettetelo nel vostro Tema figlio di Divi (nel mio caso il tema Child si chiama derma):
Inserite il seguente codice nel file menu.js:
jQuery(document).ready(function($){ function ds_setup_collapsible_submenus() { var $menu = $('.et_mobile_menu'), top_level_link = '.et_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'); }); } }); } setTimeout(function() { ds_setup_collapsible_submenus(); }, 700); });
FASE 2:
Collegare il menu.js nella scheda Integrazione di Divi >> Opzioni del tema >> Integrazione >> Aggiungi il codice alla del tuo blog.
Nel mio caso il codice (il percorso completo del file menu.js) è:
<script type='text/javascript' src='https://derma-am.com/wp-content/themes/derma/menu.js'></script>
FASE 3:
Aggiungete il seguente codice nel vostro Divi's stile.css:
/* Closing sub menu - mobile version */ .et_pb_menu .et_mobile_menu .menu-item-has-children > a, #main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; } .et_pb_menu .et_mobile_menu .menu-item-has-children > a:after, #main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules', sans-serif; text-align: center; speak: none; font-weight: 500; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; font-size: 14px; font-style: italic; content: '\4c'; top: 11px; right: 13px; } .et_pb_menu .et_mobile_menu .menu-item-has-children.visible > a:after, #main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; } .et_pb_menu .et_mobile_menu ul.sub-menu, #main-header .et_mobile_menu ul.sub-menu, .et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out; } .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu, #main-header .et_mobile_menu li.visible > ul.sub-menu, .et-db #et-boc .et-l #main-header .et_mobile_menu li.visible > ul.sub-menu, .et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu li.visible > ul.sub-menu, .et-db #et-boc .et-l .et_pb_menu .et_mobile_menu li.visible > ul.sub-menu { display: block !important; visibility: visible !important; }
È possibile aggiungere qualsiasi testo alla riga 19 (ad esempio): contenuto: 'open \4c'; e alla riga 26 (ad esempio): contenuto: 'chiudere \4d';
Voilà!
Buon divertimento 🙂
Salute