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