Wenn du in deiner Hauptnavigation ein Untermenü nutzt, sind in Divi in der mobilen Ansicht standardmäßig alle Untermenüs ausgeklappt, was das Menü bei mehreren Untermenüs schnell unübersichtlich und schwer zu bedienen macht.
Mit diesem einfachen Trick zeige ich dir, wie du ganz einfach ohne zusätzliches Plugin die Untermenüs deiner Divi-Website auf mobilen Endgeräten einklappst, sodass deine Besucher einfacher durch deine Website navigieren können.
So einfach geht’s:
Füge in den Divi Theme Optionen unter Integration > Code dem < head > Ihres Blogs hinzufügen folgenden Javascript-Code hinzu:
<script>
jQuery(function ($) {
$(document).ready(function () {
const $mobileMenuItems = $('ul.et_mobile_menu li.menu-item-has-children, ul.et_mobile_menu li.page_item_has_children');
// Toggle-Button anhängen
$mobileMenuItems.each(function () {
if (!$(this).find('.mobile-toggle-icon').length) {
$(this).append('<a href="#" class="mobile-toggle-icon" aria-label="Untermenü ein-/ausklappen"></a>');
}
});
// Klickfunktion
$('ul.et_mobile_menu').on('click', '.mobile-toggle-icon', function (e) {
e.preventDefault();
const $parentItem = $(this).closest('li');
$parentItem.toggleClass('mobile-toggle-open');
$parentItem.children('ul.sub-menu, ul.children').first().toggleClass('visible');
});
// Optional: Hover-Feedback
$('ul.et_mobile_menu').on('mouseenter', '.mobile-toggle-icon', function () {
$(this).parent().addClass('active-toggle');
}).on('mouseleave', '.mobile-toggle-icon', function () {
$(this).parent().removeClass('active-toggle');
});
// Optional: Attribut für Icon-Handling via CSS
$mobileMenuItems.attr('data-icon', 'P');
});
});
</script>Kopiere anschließend in den Custom CSS Bereich von Divi oder in das Stylesheet deines Child-Themes folgendes CSS:
/*
** Divi Untermenüs mobil zusammenklappen
*/
/* Toggle-Icon geschlossen */
ul.et_mobile_menu li.menu-item-has-children > .mobile-toggle-icon::after {
color: #da181f;
background: #f1f1f1;
top: 10px;
position: relative;
font-family: "ETModules";
content: '\33';
border-radius: 50%;
padding: 3px;
}
/* Toggle-Icon geöffnet */
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > .mobile-toggle-icon::after {
content: '\32';
}
/* Stärkere Spezifität für das Ausblenden */
ul.et_mobile_menu li.menu-item-has-children > ul.sub-menu,
ul.et_mobile_menu li.menu-item-has-children > ul.children {
display: none !important;
visibility: hidden !important;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
/* Sichtbar, wenn aktiv */
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > ul.sub-menu,
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > ul.children {
display: block !important;
visibility: visible !important;
max-height: 1000px;
overflow: visible;
}
/* Toggle-Button Positionierung */
ul.et_mobile_menu li.menu-item-has-children,
ul.et_mobile_menu li.page_item_has_children {
position: relative;
}
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
width: 44px;
height: 100%;
max-height: 44px;
position: absolute;
right: 0;
top: 0;
z-index: 999;
background-color: transparent;
border: none;
text-align: center;
opacity: 1;
padding: 0 !important;
}
/* Menü-Links hervorheben */
ul.et_mobile_menu li.menu-item-has-children > a {
font-weight: 600 !important;
background-color: transparent;
}Und fertig!
Der Code wird nun auf allen Seiten deiner Website ausgeführt, sodass automatisch das Menü für mobile Geräte zusammengeklappt ist.
Wenn dir das Codeschnipsel weitergeholfen hat oder du noch Fragen hast, freue ich mich über einen kurzen Kommentar von dir.
