Editor X: Hamburger-Menüs verwenden

7 Min. Lesezeit

Editor X wird zu Wix Studio, unserer neuen Plattform für Agenturen und Freelancer.Mehr über Wix Studio erfahren

Hamburger-Menüs sind minimalistische, platzsparende Menüs, die nur angezeigt werden, wenn Besucher auf das Menüsymbol klicken. Passe das Design deines Hamburger-Menüs an das Design deiner Website an. Du kannst auch wählen, ob es als Seitenleiste oder als Vollbild-Menü geöffnet werden soll.

Mehr erfahren:

Klicke oben links im Editor auf Hinzufügen .
Klicke auf Menü & Suche.
Klicke auf Hamburger-Menüs.
Ziehe das entsprechende Menü per Drag-and-Drop an die gewünschte Stelle auf deiner Seite.
(Optional) Erstelle ein neues Menü mit benutzerdefinierten Seiten:
1. Klicke auf das Menüsymbol und wähle Menü öffnen.
2. Wähle das vertikale Menü mit deinen Seiten.
3. Klicke auf Menü verwalten.
4. Klicke auf das Aufklappmenü unter Welches Menü wird angezeigt?.
5. Klicke auf Website-Menü verwalten.
6. Klicke unten auf + Neues hinzufügen, um das benutzerdefinierte Menü zu erstellen.

Nachdem du deiner Website ein Hamburger-Menü hinzugefügt hast, kannst du es personalisieren, indem du die folgenden Elemente anpasst.

Passe den Button an, auf den Besucher klicken, um das Hamburger-Menü zu öffnen. Klicke auf das Symbol für Design

, um die Füllfarbe, den Rand und den Schatten des Buttons anzupassen. Du kannst auch auf Grundform ändern klicken, um ein anderes Symbol auszuwählen.

Rufe den Container auf, in dem sich dein Menü befindet, indem du auf das Menüsymbol klickst und die Option Menü öffnen wählst.

Wähle dann den Menü-Container aus und passe ihn wie folgt an:

Elemente zum Menü-Container hinzufügen

Die Füllfarbe des Containers ändern

Eine Animation zum Menü-Container hinzufügen

Die Größe und Ausrichtung des Containers ändern

Passe das Symbol an, auf das Besucher klicken, um das Menü zu schließen. Standardmäßig wird das X-Symbol oben rechts in deinem Menü-Container angezeigt, aber du kannst es jederzeit nach Belieben verschieben.

Klicke im Inspektor-Panel auf das Symbol für Design

, um die Füllfarbe, den Rand und den Schatten des Buttons anzupassen. Du kannst auch auf Grundform ändern klicken, um ein anderes Symbol auszuwählen.

Dies ist das tatsächliche Menüelement. Klicke auf Menü verwalten, um die Seiten, Links und Untermenüs auszuwählen, die angezeigt werden sollen. Ändere dann die Ausrichtung deiner Menüelemente und des Untermenüpfeils, indem du auf das Symbol für Layout

klickst.

Klicke im Inspektor-Panel auf das Symbol für Design

, um das Menü für zwei Status zu gestalten: Standard und Ausgewählt, wenn ein Besucher ein Menüelement auswählt.

Mehrere Hamburger-Menüs mit Lightboxen erstellen

Der Container deines Hamburger-Menüs ist ein Master-Abschnitt, was bedeutet, dass du nur ein Hamburger-Menü pro Website erstellen kannst.. Du kannst jedoch einen ähnlichen Effekt erzielen, indem du eine Lightbox hinzufügst, die ein benutzerdefiniertes vertikales Menü anzeigt.

Wähle eine der folgenden Optionen, um weitere Informationen zu erhalten:

Eine Lightbox als Menü hinzufügen