[Çözüldü] Divi'de kapat/aç menüleriyle mobil menü nasıl oluşturulur?

  

3
Konu başlatıcı

İçinde Divi WordPress temasında alt menüleri kapatıp açma seçeneği ile mobil menü nasıl oluşturabilirim?

Demek istediğim şu:

ALT MENÜLERIN KAPALI DURUMU:

Alt menüleri kapatma ve açma seçeneği ile Divi mobil menü nasıl oluşturulur

ve ALT MENÜLERIN AÇIK DURUMU:

Alt menüleri kapatma ve açma seçeneği ile Divi mobil menü nasıl oluşturulur

Teşekkürler!

1 Yanıt
2

İşte 3 adımda nasıl yapılacağı:

ADIM 1:

Yeni dosya oluştur menu.js ve içine koy Divi'nin Çocuk Teması (benim durumumda Çocuk temamın adı derma):

Alt menüleri açma ve kapama seçeneği ile Divi mobil menü oluşturmayı öğrenin

Aşağıdaki kodu 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);
});

ADIM 2:

Bağlantı menu.js entegrasyon sekmesinde Divi >> Tema Seçenekleri >> Entegrasyon >> Blogunuzun kısmına kod ekleyin.

Benim durumumda kod (tam yol menu.js) dır:

<script type='text/javascript' src='https://derma-am.com/wp-content/themes/derma/menu.js'></script>

alt menüleri açma ve kapama seçeneği ile Divi mobil menüsünün nasıl oluşturulacağını öğrenin - resim 2

 

ADIM 3:

Aşağıdaki kodu Divi'nize ekleyin stil.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;
}

Şuraya herhangi bir metin ekleyebilirsiniz: 19. satır (örneğin): içerik: 'open \4c'; ve 26. satırda (örneğin): içerik: 'close \4d';

Voila!

İyi eğlenceler 🙂

Şerefe

Paylaş: