Mobile Menüs
Wähle aus vier verschiedenen Stilen für mobile Menüs und konfiguriere genau, wie sich deine Navigation auf kleinen Bildschirmen verhält — ganz ohne CSS oder JavaScript anzufassen.
Breakpoint festlegen
Der Breakpoint ist die Viewport-Breite, unterhalb der das Desktop-Menü ausgeblendet und das Mobilmenü angezeigt wird. Unter Menu Builder → Mobile festlegen.
Standard ist 768 px (übliche Tablet/Mobil-Grenze). Jeden Pixelwert eingeben oder Auto wählen, damit das Plugin den verfügbaren Platz dynamisch erkennt.
Die mobilen Stile
1. Dropdown Standard
Der häufigste Stil. Menüpunkte stapeln sich vertikal in einem klassischen Dropdown-Panel direkt unter der Menüleiste.
- Vertraut und allgemein verstanden
- Gut für Menüs mit vielen Punkten geeignet
- Ideal für: Blogs, Unternehmenswebsites, Portfolios
2. Vollbild
Menüpunkte erscheinen zentriert auf einem Vollbild-Overlay, das den gesamten Viewport überdeckt.
- Dramatisch und modern
- Am besten für maximal 5–8 Hauptpunkte geeignet
- Ideal für: Agenturen, Fotografen, Landing Pages
3. Drawer — Links
Ein Panel gleitet vom linken Bildschirmrand herein und überlappt teilweise den Seiteninhalt. Der Rest der Seite wird abgedunkelt.
- Vertraut aus mobilen Apps (z. B. Gmail, Google Maps)
- Gut für tiefe Navigationshierarchien
- Ideal für: E-Commerce, Portale, Dokumentationswebsites
4. Drawer — Rechts
Wie das linke Drawer, gleitet aber vom rechten Bildschirmrand herein. Nützlich, wenn der Hamburger-Button rechts sitzt.
Zwischen Stilen wechseln unter Menu Builder → Mobile. Die Änderung gilt sofort — kein erneutes Veröffentlichen nötig.
Hamburger-Button
| Option | Beschreibung |
|---|---|
| Symbol-Stil | Klassisch (3 Linien), Modern (abgerundet) oder Minimal (dünn). |
| Ausrichtung | Links, Mitte oder Rechts der mobilen Navigationsleiste. |
| Symbolfarbe | Unabhängig von der Menüpunkt-Farbe. |
| Button-Hintergrund | Optionale Hintergrundfarbe hinter dem Hamburger-Symbol. |
Mobile Link-Farben
Du kannst den Links im Mobilmenü eigene Farben geben, vollständig unabhängig vom Desktop-Menü:
- Normal — Standard-Linkfarbe im Mobilmenü
- Hover — Farbe beim Berühren oder Hovern
- Aktiv — Farbe für den aktuell aktiven Punkt
Felder leer lassen, um die Desktop-Menüfarben zu übernehmen.
Untermenü-Verhalten auf Mobilgeräten
Wenn ein Menüpunkt Unterelemente hat, kannst du mit der Akkordeon-Option steuern, wie sie sich auf Mobilgeräten aufklappen:
- Akkordeon ein — Nur ein Untermenü kann gleichzeitig geöffnet sein. Öffnen eines Untermenüs schließt die anderen automatisch. Empfohlen für lange Menüs.
- Akkordeon aus (Standard) — Mehrere Untermenüs können gleichzeitig aufgeklappt bleiben.
Mega-Menüs auf Mobilgeräten
Wenn ein Hauptmenüpunkt ein Mega-Menü hat, öffnet das Antippen auf Mobilgeräten ein Vollbild-Panel mit einem ← Zurück-Button — was der Navigation ein App-ähnliches Gefühl verleiht.
- Sichtbar auf Mobilgeräten (Push-Bildschirm) — die oben beschriebene Push-Navigation.
- Ausgeblendet auf Mobilgeräten — das Mega-Panel wird auf kleinen Bildschirmen nicht gerendert.
Auf Mobilgeräten werden individuelle Mega-Menü-Darstellungsüberschreibungen (Hintergrund, Farben, Schriften) automatisch deaktiviert, damit Links immer im selben neutralen Stil wie der Rest des Mobilmenüs gerendert werden.
Live-Telefonvorschau
Während du den Tab Mobile im Admin-Panel geöffnet hast, aktualisiert sich ein fixiertes Telefonmodell auf der rechten Seite in Echtzeit bei jeder Änderung einer Mobileinstellung — Stil, Overlay-Farbe, Hamburger-Ausrichtung, Linkfarbe und mehr.
Das Plugin respektiert automatisch die CSS-Media-Query prefers-reduced-motion. Wenn der Besucher in seinen Betriebssystem-Barrierefreiheitseinstellungen „Bewegung reduzieren" aktiviert hat, werden alle Animationen deaktiviert.