[Resolvido] No Divi, como criar um menu móvel com menus de fechar/abrir?

  

3
Início do tópico

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:

como criar um menu móvel Divi com opção de fecho e abertura de submenus

e ESTADO DE ABERTURA DOS SUB-MENUS:

como criar um menu móvel Divi com opção de fecho e abertura de submenus

Obrigado!

1 Resposta
2

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):

aprender a criar um menu móvel Divi com opção de abertura e fecho de submenus

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>

aprender a criar o menu móvel Divi com opção de abertura e fecho de submenus - imagem 2

 

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

Partilhar: