3
07/11/2024 8:22 am
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:

ve ALT MENÜLERIN AÇIK DURUMU:

Teşekkürler!
1 Yanıt
2
07/11/2024 8:24 am
İş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):

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>

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
