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