FAQ & News

Deine Wissensquelle für Web & WordPress
Im Blog Archiv findest du sämtliche Beiträge zu Webdesign, Hosting, WordPress-Tipps und digitalen Trends. Durchsuche Themen nach Kategorien oder nutze die Übersicht, um genau das zu finden, was dich aktuell interessiert. 

So erstellst du ein kollabierendes mobiles Menü in Divi (mit Unterpunkten)

Wenn dein mobiles Divi-Menü sehr viele Einträge hat, wird die Liste schnell unübersichtlich. Mit einem zusammenklappbaren mobilen Menü (Accordion-Effekt) zeigst du nur die oberste Ebene – Unterpunkte werden per Tipp auf ein Icon ein- und ausgeklappt. Das verbessert Usability, Übersicht und Page Experience.

Voraussetzungen & empfohlene Einbindung

  • Divi (aktuelle Version).
  • jQuery ist in Divi standardmäßig geladen – kein zusätzliches Enqueuing nötig.
  • Einbindungsempfehlung: JavaScript im Child-Theme (z. B. /wp-content/themes/dein-child/js/mobile-menu.js) oder über Divi > Theme Options > Integration > Add code to <head>. CSS in Divi > Theme Options > Custom CSS oder im Child-Theme-Stylesheet. Vermeide mehrere Orte gleichzeitig, damit du später leichter warten kannst.

Schritt 1: jQuery-Code hinzufügen

Dieses Script ergänzt bei Menüpunkten mit Untermenüs ein Toggle-Icon, öffnet/schließt die Submenüs und setzt Zustandsklassen. Es nutzt die Divi-typischen Klassen .et_mobile_menu, .menu-item-has-children und .sub-menu.

<script>
jQuery(function ($) {
  // Toggle-Icon neben Punkte mit Untermenüs einfügen
  $('ul.et_mobile_menu li.menu-item-has-children, ul.et_mobile_menu li.page_item_has_children')
    .append('<button class="mobile-toggle-icon" aria-expanded="false" aria-label="Untermenü öffnen"></button>')
    .attr('data-icon', 'P'); // Icon-Vorgabe (siehe CSS)

  // Klick-Handler: auf/zu klappen
  $('ul.et_mobile_menu').on('click', '.mobile-toggle-icon', function (e) {
    e.preventDefault();
    const $li = $(this).closest('li');
    const isOpen = $li.hasClass('mobile-toggle-open');

    $li.toggleClass('mobile-toggle-open');
    $li.children('ul.sub-menu, ul.children').first().toggleClass('visible');

    // ARIA-Status für Barrierefreiheit aktualisieren
    $(this).attr('aria-expanded', String(!isOpen));
    $(this).attr('aria-label', !isOpen ? 'Untermenü schließen' : 'Untermenü öffnen');
  });

  // (Optional) Hover-State-Klasse
  $('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');
  });
});
</script>

Hinweise:

  • Ich verwende ein <button> statt eines leeren Links: besser für Accessibility (Tastaturfokus, ARIA) und semantisch korrekt.
  • Falls du Skripte kombinierst/minifizierst (z. B. Autoptimize, WP Rocket), leere Cache/Minify nach dem Einbau.

Schritt 2: CSS für Icons, Sichtbarkeit & Position

Das CSS blendet Submenüs initial aus, zeigt sie mit der Klasse .visible an und zeichnet das Toggle-Icon. Die Icon-Glyphen stammen aus Divis ETModules-Font.

/* #### Collapsing Mobile Menu (Divi) #### */

/* Toggle-Icon (Pseudo-Content aus ETModules) */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon::after {
  font-family: "ETModules";
  content: '\33'; /* Pfeil-rechts (geschlossen) */
  position: relative;
  top: 10px;
  padding: 3px;
  border-radius: 50%;
  color: #da181f;        /* Icon-Farbe */
  background: #f1f1f1;   /* Icon-Hintergrund */
}

/* Zustand: geöffnetes Untermenü (Icon wechseln) */
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > .mobile-toggle-icon::after,
ul.et_mobile_menu li.page_item_has_children.mobile-toggle-open > .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children.mobile-toggle-open > .mobile-toggle-icon::after {
  content: '\32'; /* Pfeil-unten (geöffnet) */
}

/* Elternpunkte typografisch hervorheben (optional) */
.et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a {
  font-weight: 600 !important;
  background: transparent;
}

/* Positionierung des Toggle-Buttons */
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 {
  position: relative;
}

ul.et_mobile_menu .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu .mobile-toggle-icon {
  width: 44px;
  max-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
  border: 0;
  padding: 0 !important;
  background: transparent;
  text-align: center;
  opacity: 1;
  cursor: pointer;
}

/* Untermenüs initial verbergen */
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 {
  display: none !important;
  visibility: hidden !important;
}

/* Sichtbar, wenn per JS .visible gesetzt wurde */
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 {
  display: block !important;
  visibility: visible !important;
}

Farben & Icons anpassen

Wechsle Icon- und Hintergrundfarbe hier:

color: #da181f;      /* Icon-Farbe */
background: #f1f1f1; /* Icon-Hintergrund */

Andere Pfeilsymbole sind über den content-Code der ETModules-Font möglich (z. B. '\33' für Pfeil rechts, '\32' für Pfeil unten). Wenn du lieber SVG nutzt, ersetze das Pseudo-Element durch ein Inline-SVG im Button (Performance-freundlich, vektor-scharf).

Barrierefreiheit (A11y)

  • Der Toggle ist ein <button>, nicht nur ein Link – dadurch ist er per Tastatur erreichbar.
  • Die Attribute aria-expanded und aria-label werden beim Auf/Zu-Klappen dynamisch aktualisiert.
  • Wenn Elternlinks selbst klickbar bleiben sollen, achte auf ausreichende „Tap Targets“ (Button rechts, Link links).

Fehlerbehebung & Tipps

  • Menü klappt nicht? Prüfe Browser-Konsole auf JS-Fehler (andere Snippets/Plugins), lösche Caches/Minify, stelle sicher, dass nur eine Kopie des Codes aktiv ist.
  • Falscher Selektor? Nutzt du Theme Builder Header? Die Klassennamen können abweichen – prüfe dein Markup (Rechtsklick → „Untersuchen“) und passe die Selektoren (z. B. Wrapper um .et_mobile_menu) an.
  • Transition gewünscht? Du kannst ein weiches Ein-/Ausblenden via CSS-Transition auf max-height oder opacity ergänzen. Beachte, dass Divi intern display: none setzt – die Klasse .visible überschreibt das bereits.
  • Mehrsprachige Seiten: Button-Labels (ARIA) ggf. übersetzen.

Warum das mobil hilft

Ein zusammenklappbares Menü reduziert Scroll-Strecken, verbessert die Orientierung, senkt versehentliche Taps und trägt zu besseren Core Web Vitals (Interaktions- und Layout-Stabilität) bei. Besonders bei Mega-Menüs mit mehreren Ebenen ist der Accordion-Ansatz die nutzerfreundlichste Lösung.

 0 0