Em Divi WordPress theme como posso criar um menu móvel com a opção de fechar e abrir os submenus?
Eis o que quero dizer:
ESTADO FECHADO DOS SUB-MENUS:

e ESTADO DE ABERTURA DOS SUB-MENUS:

Obrigado!
Eis como o fazer em 3 passos:
PASSO 1:
Criar novo ficheiro menu.js e colocá-lo no seu Tema filho do Divi (no meu caso, o meu tema filho chama-se derma):

Coloque o seguinte código no ficheiro 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);
});
PASSO 2:
Ligar o menu.js no separador de integração em Divi >> Opções do tema >> Integração >> Adicionar código ao do seu blogue.
No meu caso, o código (o caminho completo para o ficheiro menu.js) é:
<script type='text/javascript' src='https://derma-am.com/wp-content/themes/derma/menu.js'></script>

PASSO 3:
Adicione o seguinte código no seu Divi's estilo.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;
}
Pode acrescentar qualquer texto na: linha 19 (por exemplo): conteúdo: 'open \4c'; e na linha 26 (por exemplo): conteúdo: 'fechar \4d';
Voilà!
Desfrutar 🙂
Saúde
