Unter Divi WordPress-Theme: Wie kann ich ein mobiles Menü erstellen, das die Möglichkeit bietet, Untermenüs zu schließen und zu öffnen?
Das meine ich:
GESCHLOSSENER ZUSTAND DER UNTERMENÜS:
und GEÖFFNETER ZUSTAND DER UNTERMENÜS:
Danke!
Hier erfahren Sie in 3 Schritten, wie es geht:
SCHRITT 1:
Neue Datei erstellen menu.js und legen Sie es in Ihr Divi's Child Theme (in meinem Fall heißt mein Child-Theme "derma"):
Fügen Sie den folgenden Code in die 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); });
SCHRITT 2:
Verbinden Sie die menu.js auf der Registerkarte Integration in Divi >> Themenoptionen >> Integration >> Code in den Ihres Blogs einfügen.
In meinem Fall ist der Code (der vollständige Pfad zum menu.js) ist:
<script type='text/javascript' src='https://derma-am.com/wp-content/themes/derma/menu.js'></script>
SCHRITT 3:
Fügen Sie den folgenden Code in Ihre Divi's 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; }
Sie können einen beliebigen Text hinzufügen: Zeile 19 (zum Beispiel): Inhalt: 'open \4c'; und in Zeile 26 (zum Beispiel): Inhalt: 'close \4d';
Voilà!
Viel Spaß 🙂 .
Prost