Layout & Effekte
Passe an, wie die Navigationsleiste angeordnet ist, lasse sie beim Scrollen oben haften und füge dezente Animationen hinzu — alles im Bereich Layout des Menu Builders.
Abstände und Ausrichtung
Im Bereich Layout kannst du steuern, wie die Menüelemente angeordnet werden:
- Ausrichtung — wo die Elemente in der Leiste sitzen: Start, Mitte, Ende, Abstand gleichmäßig oder Abstand zwischen Elementen.
- Abstand — der Zwischenraum zwischen den Menüelementen.
- Horizontales / vertikales Padding — der Innenabstand der Navigationsleiste.
- Container-Rahmenradius — runde die Ecken der gesamten Leiste ab.
- Letztes Element verschieben — fixiere das letzte Menüelement am gegenüberliegenden Rand (praktisch für einen „Kontakt"- oder „Anmelden"-Call-to-Action).
Sticky-Navigation
Aktiviere Sticky, damit die Navigationsleiste beim Scrollen am oberen Bildschirmrand fixiert bleibt.
| Option | Beschreibung |
|---|---|
| Beim Scrollen verkleinern | Die Leiste wird kompakter, sobald die Seite gescrollt wird. |
| Schatten | Fügt einen Schatten unter der Leiste hinzu, wenn sie fixiert ist. |
| Layout spiegeln | Verwende eine andere Ausrichtung für den fixierten Zustand als für den Standardzustand. |
| Übergang | Wie sanft die Leiste zwischen den Zuständen animiert (in Sekunden). |
| Z-Index | Stapelreihenfolge, falls die Leiste über anderen fixierten Elementen liegen soll. |
Scroll-Fortschrittsanzeige
Eine dünne Linie, die sich beim Scrollen füllt — ein beliebtes Element in langen Artikeln und Dokumentationen.
- Aktiviere Scroll-Fortschrittsanzeige im Bereich Layout.
- Wähle die Farbe, Höhe (1–10 px) und Position (oben oder unten an der Navigationsleiste).
Einblendanimation
Animiere das Menü beim ersten Laden der Seite. Wähle aus Einblenden, Einfahren von oben/unten/links/rechts, Hineinzoomen oder Flip X — oder lass es auf Keine.
Du kannst auch die Dauer, eine Verzögerung vor dem Start und einen Versatz einstellen, damit die Elemente nacheinander erscheinen.
Link-Hover-Animation
Füge eine Mikrointeraktion hinzu, wenn der Besucher mit der Maus über einen Menülink fährt. Optionen umfassen Hochheben, Skalieren, Pulsieren, Aufspringen, Schütteln, Leuchten und Animiertes Unterstreichen.
Dropdown-Indikator
Elemente mit einem Untermenü können einen kleinen Indikator anzeigen. Wähle die Form — Dreieck, Pfeil, Punkt oder Kein — und optional Farbe, Größe und ob er sich beim Öffnen des Dropdowns dreht.
Das Dropdown-Panel selbst ist vollständig anpassbar unter Stil → Untermenü-Dropdown: Rahmenradius, horizontales und vertikales Padding, Schriftgröße, Schriftgewicht und Mindestbreite. Die Hover-Farbe wird adaptiv aus dem Untermenü-Hintergrund berechnet, sodass sie auf hellen und dunklen Themes sichtbar bleibt.
Scroll Spy
Scroll Spy hebt automatisch den Navigationslink hervor, der dem Abschnitt entspricht, der gerade im Viewport sichtbar ist — ein gängiges Muster in Dokumentationen, Landingpages und einseitigen Sites.
- Aktiviere Scroll Spy unter Layout → Layout.
- Lege einen Auslöser-Versatz fest (Standard: 80 px) — die Höhe der Sticky-Leiste wird zur Laufzeit automatisch addiert.
- Aktiviere optional Sanftes Scrollen mit History-API-Hash-Aktualisierungen und ARIA-Live-Region-Ankündigungen für Screenreader.
Der letzte Abschnitt der Seite wird immer aktiviert, wenn ganz nach unten gescrollt wird. Links aktiver Abschnitte teilen das visuelle Design, das unter Farben → Aktiver Link definiert ist.
Alle Animationen berücksichtigen die prefers-reduced-motion-Einstellung des Besuchers — siehe die Seite Barrierefreiheit.