Hiacynta Hess
Webdesignerin

Aktualisiert am:
18. Dezember 2023

Öffnest du das Menü auf deinem mobilen Endgerät wird dir sicherlich schon aufgefallen sein, dass alle Menüpunkte untereinander angezeigt werden. Während du auf dem Desktop ein Drop-Down-Menü hast, entfällt dies beim Smartphone und Tablet.

Hast du ein sehr umfangreiches Menü mit vielen Menüpunkten wird es schnell unübersichtlich. Daher lernst du in dieser Anleitung, wie du die Untermenü-Punkte einklappen kannst, sodass du ein Drop-Down-Menü hast, wie du es vom Desktop kennst.

1. jQuery Code einfügen, um das Menü einzuklappen

Im ersten Schritt musst du in den <head> Bereich den unten aufgeführten Code einfügen. Gehe dazu im Dashboard auf den Punkt Divi und wählst den Theme Builder aus. Navigiere zu den Integrationen und füge den Code bei Code dem <head> Ihres Blogs hinzufügen ein.

Mobiles Divi Menu einklappen

Füge folgenden Code ein:

<script id="dt-collapsable-menu-items">
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" aria-label="toggle sub menu"><svg class="dt-icons dt-open-icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg><svg class="dt-icons dt-close-icon" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg></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');
		});
		$('.mobile-toggle')
			.on('mouseover', function () {
				$(this).parent().addClass('is-hover');
			})
			.on('mouseout', function () {
				$(this).parent().removeClass('is-hover');
			});
	});
});
</script>

2. CSS Code in den Theme Customizer einfügen

Im nächsten Schritt fügst du in den Theme-Customizer folgenden CSS Code ein:

/*Proper Collapsable Mobile Menu*/
/*Style the icon's placeholder*/
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;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
	border-bottom: 0;
	text-align: center;
}
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;
}
.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;
}

/*Hide the Sub-menu*/
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;
}

/*Show the sub-menu when the + icon is clicked*/
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;
}

/*Create the opening/closing icon using the SVG Icons*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-icons,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle .dt-icons {
	top: 10px;
	position: relative;
}

/*Hide the closing icon if the sub-menu is not open*/
ul.et_mobile_menu li.menu-item-has-children:not(.dt-open) .mobile-toggle .dt-close-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children:not(.dt-open) .mobile-toggle .dt-close-icon {
	display: none;
}

/*Hide the opening icon if the sub-menu is open*/
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle .dt-open-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle .dt-open-icon {
	display: none;
}

Das war's dann auch schon. Abschließend hoffe ich, dass diese Anleitung hilfreich für dich war und dir bei deinem Vorhaben weiterhilft. Viel Erfolg und Spaß bei der Umsetzung!

Schlussbemerkung: Dieses Schnippet habe ich mit der Divi-Version 4.23.1 getestet. Sollte dieses Snippet bei dir nicht funktionieren, oder sollte die Anleitung veraltet sein, kontaktiere mich bitte.

Hat dir dieser Artikel geholfen?

[stellar]
WordPress Website selbst erstellen

Hiacynta Hess

Hiacynta Hess ist die Autorin des Artikels und führt seit 2004 ein Online Business. Mittlerweile unterstützt sie Online-Unternehmer bei ihrer WordPress-Website und weiterführenden Online-Marketing Maßnahmen.

Ihre Expertise und Erfahrungen zu diesen Themenbereichen teilt sie auf ihrem Blog, ihrem YouTube Kanal und in ihrem Mentoringprogramm.

Für vertiefende Einblicke und regelmäßige Updates folge Hiacynta auf Instagram. Abonniere auch ihren Newsletter in dem sie exklusive Tipps, bewährte Strategien und vieles mehr mit ihrer engagierten Community teilt. Lass dich inspirieren!

Transparenzhinweis:
Die mit einem * gekennzeichneten Links sind Affiliate Links. Diese diesen zur Orientierung und zum einfachen Finden der Produkte. Solltest du über den Link etwas bestellen, erhalte ich eine kleine Provision. Für dich entstehen keine Mehrkosten. Generell empfehle ich nur Produkte, die ich selbst getestet habe und die ich auch gut finde. Danke für deine Unterstützung.

Abonniere meinen Newsletter!

Mache es wie die anderen Online-Unternehmer, die regelmäßig exklusive Insidertipps für Ihr Online-Business und Ihre Marketing-Maßnahmen direkt ins Postfach bekommen. Kostenlos und jederzeit abbestellbar.

Weitere Infos findest du in meinen Datenschutzhinweisen.

WordPress Cookie Hinweis von Real Cookie Banner