Hier geht es darum, das Mobile-Menü von einer erweiterten Liste in eine kompakte Liste zu verwandeln. Das können wir erreichen, indem wir etwas jQuery und CSS-Code hinzufügen. Dadurch wird nicht nur das Untermenü des mobilen Divi-Menüs eingeklappt, sondern es werden auch ein paar schöne Kippschalter hinzugefügt, die dem Nutzer anzeigen, dass es noch mehr Einträge gibt und wo er klicken muss.
Dieses Tutorial besteht aus zwei Teilen, einen für jede Art von Code. Beide arbeiten zusammen und werden benötigt, damit es funktioniert.
Schritt 1
Füge auf der Registerkarte Divi>Theme-Optionen>Integrationen im Codebereich „Code zum < head > deines Blogs hinzufügen“ folgenden Code ein.
<script >
jQuery(function($) {
$(document).ready(function() {
$(„body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children“).append(‚<a href=“#“ class=“mobile-toggle“></a>‘);
$(‚ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle‘).click(function(event) {
event.preventDefault();
$(this).parent(‚li‘).toggleClass(‚dt-open‘);
$(this).parent(‚li‘).find(‚ul.children‘).first().toggleClass(‚visible‘);
$(this).parent(‚li‘).find(‚ul.sub-menu‘).first().toggleClass(‚visible‘);
});
iconFINAL = ‚P‘;
$(‚body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children‘).attr(‚data-icon‘, iconFINAL);
$(‚.mobile-toggle‘).on(‚mouseover‘, function() {
$(this).parent().addClass(‚is-hover‘);
}).on(‚mouseout‘, function() {
$(this).parent().removeClass(‚is-hover‘);
})
});
});
</script>
Schritt 2
Der nächste Schritt ist das Hinzufügen des entsprechenden CSS-Codes. Dieser Code arbeitet mit JQuery zusammen und sorgt für den Effekt, dass das Divi-Mobilmenü zusammenklappt. Füge diesen in das Feld Divi>Theme Optionen>Eigenes CSS ein.
/*change hamburger icon to x when mobile menu is open*/
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‚\4d‘;
}
/*adjust the new toggle element which is added via jQuery*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
width: 44px;
height: 100%;
padding: 0px !important;
max-height: 44px;
border: none;
position: absolute;
right: 0px;
top: 0px;
z-index: 999;
background-color: transparent;
}
/*Menue positionieren*/
ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
position: relative;
}
/*Hintergrundfarbe von Unterpunkten entfernen*/
.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/*Submenu verstecken*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
display: none !important;
visibility: hidden !important;
}
/*Menue aufklappen*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
display: block !important;
visibility: visible !important;
}
/*Position und Farbe anpassen*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
text-align: center;
opacity: 1;
}
/*Icon geschlossen*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
top: 10px;
position: relative;
font-family: „ETModules“;
content: ‚\33‘;
color: #00d263;
background: #f0f3f6;
border-radius: 50%;
padding: 3px;
}
/*Icon offen*/
ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
content: ‚\32‘;
}
/*add point on top dropdown*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
position: absolute;
right: 5%;
margin-left: -20px;
top: -14px;
width: 0;
height: 0;
content: “;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ffffff;
}
/*position hamburger menu*/
.mobile_menu_bar {
position: relative;
display: block;
bottom: 10px;
line-height: 0;
}
/*Hintergrundfarbe mit abgerundeten Ecken neu festlegen*/
.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
background-color: #ffffff!important;
border-radius: 10px;
}
