So bearbeiten Sie das mobile Menü in Webflow

Ein einfaches und intuitives Navigationsmenü ist eines der wichtigsten Designelemente auf Ihrer Website. Es verhält sich wie eine Karte und leitet Besucher von der Hauptseite weg. Angesichts der wachsenden Zahl von Menschen, die das Internet auf ihren Mobilgeräten nutzen, sollte Ihre Website auch über ein für Mobilgeräte optimiertes Navigationsmenü verfügen.

Glücklicherweise hat Webflow es einfach gemacht, eine zusammenklappbare Hamburger-Menüleiste hinzuzufügen, die Ihre mobile Website vereinfacht. Lesen Sie weiter, um zu erfahren, wie Sie dieses mobile Menü in Webflow bearbeiten.

So fügen Sie eine Navigationsleiste hinzu

Das Hamburger-Menü ist ein wichtiges Gestaltungselement, wenn es um begrenzten horizontalen Raum geht. Dadurch entfällt die Notwendigkeit einer sperrigen feststehenden Navigationsleiste, die wertvollen Platz einnimmt.

In Webflow sind dieses Menü und seine Funktionen in das NavBar-Element integriert. Um dieses Element zu Ihrem Design hinzuzufügen, müssen Sie vier einfache Schritte befolgen:

• Tippen Sie oben im linken Bedienfeld auf das Symbol „+“, um das Bedienfeld „Hinzufügen“ zu öffnen.

• Scrollen Sie nach unten zum Abschnitt „Komponenten“.

• Halten Sie das NavBar-Element gedrückt.

• Ziehen Sie das Element in den Seitenkopf.

So bearbeiten Sie das mobile Menü

Nachdem Sie Ihrer Website eine Navigationsleiste hinzugefügt haben, können Sie dieses Menü auf verschiedene Weise gestalten und personalisieren.

So fügen Sie dem Menü weitere Links hinzu

Das Navigationsleistenelement enthält eine Menüschaltfläche und ein Navigationsmenü, wobei letzteres Navigationslinks enthält. Wenn Sie es zu Ihrem Design hinzufügen, gibt es einige Link-Platzhalter, die Sie entfernen oder mit Links zu Ihrer Website bearbeiten können.

Befolgen Sie diese Schritte, um weitere Navigationslinks hinzuzufügen:

• Klicken Sie auf ein beliebiges Element in der NavBar.

• Gehen Sie rechts zum Bedienfeld „Elementeinstellungen“.

• Klicken Sie auf das Zahnradsymbol, um die „Einstellungen“ zu öffnen.

• Scrollen Sie zum Abschnitt NavBar-Einstellungen.

• Klicken Sie auf die Schaltfläche „Link hinzufügen“.

Nachdem Sie nun genügend Links für alle relevanten Seiten auf der Website haben, ist es an der Zeit, die eigentliche Verlinkung vorzunehmen.

• Wählen Sie einen Navigationslink aus.
• Gehen Sie zum Bedienfeld „Elementeinstellungen“.

• Suchen Sie den Abschnitt Link-Einstellungen.

• Geben Sie die angegebene Webseiten-URL in das Feld „URL“ ein.

So ändern Sie die Menüanimation

In Webflow können Sie auch ändern, wie das mobile Menü angezeigt wird, wenn Besucher auf die Menüschaltfläche klicken. Sie können aus drei Arten von Enthüllungsanimationen wählen:

• Dropdown-Menü – Standardmäßig verschwindet das mobile Menü aus der Navigationsleiste, wenn der Besucher auf die Menüschaltfläche klickt. Es nimmt die gesamte Breite des Browserfensters ein.
• Rechts – Wenn Sie diese Erweiterungsanimation auswählen, wird Ihr mobiles Menü auf der rechten Seite des Bildschirms angezeigt. Dieses Menü nimmt die gesamte Höhe des Browserfensters ein.
• Oben links – Dieser Menütyp ist identisch mit dem Menü Oben rechts, außer dass sich das Navigationsmenü von der linken Seite des Bildschirms bewegt.

Gehen Sie wie folgt vor, um die gewünschte Erweiterungsanimation festzulegen:

• Wählen Sie ein beliebiges Element in der NavBar aus.

• Gehen Sie zum Bedienfeld „Elementeinstellungen“ auf der rechten Seite des Bildschirms.

• Tippen Sie auf das Zahnradsymbol, um die Einstellungen zu starten.

• Gehen Sie zum Abschnitt „NavBar-Einstellungen“.

• Klicken Sie auf die Option „Typ“.

• Wählen Sie Ihren bevorzugten Stil aus dem Dropdown-Menü.

Im Abschnitt NavBar-Einstellungen können Sie auch Folgendes verwalten:

• Öffnen erleichtern: Der Kurventyp, der zum Animieren des offenen Übergangs verwendet wird.
• Close Ease: Der Kurventyp, der verwendet wird, um den Close-Übergang zu animieren.
• Dauer: Wie lange es dauert, bis das Menü angezeigt wird.

Beachten Sie, dass die Dauer des Übergangs in Millisekunden gemessen wird.

So ändern Sie den Menüstil

Webflow hat es einfach gemacht, jeden Teil der Navigationsleiste zu gestalten, wodurch es einfach ist, ein mobiles Menü in Ihr Website-Design zu integrieren.

Gehen Sie wie folgt vor, um die Menüschaltfläche zu gestalten:

• Wählen Sie die Menüschaltfläche.

• Gehen Sie rechts zum Stilbedienfeld (Pinselsymbol).

Im Bedienfeld „Stil“ können Sie jeden Aspekt der Menüschaltfläche ändern. Am häufigsten ändern Designer die Farbe und Größe des Schaltflächenhintergrunds.

Gehen Sie wie folgt vor, um die Hintergrundfarbe zu ändern:

• Gehen Sie zum Abschnitt „Hintergründe“.

• Tippen Sie auf das Farbtropfensymbol, um den Farbwähler zu öffnen.

• Wählen Sie die gewünschte Farbe.

Wenn Sie die Größe des Hamburger-Symbols ändern möchten, gehen Sie folgendermaßen vor:

• Gehen Sie zum Abschnitt Typografie.

• Vergrößern oder verkleinern Sie das Symbol im Feld Aa.

Sie können auch die Farbe des Symbols im Feld oben ändern, das mit einem A und einem Farbklecks gekennzeichnet ist.

Obwohl es viele Möglichkeiten gibt, die Menüschaltfläche anzupassen, können Sie sie nicht durch ein Textelement oder ein benutzerdefiniertes Bild ersetzen.

Mobile Navigation leicht gemacht

Wenn Sie ein mobiles Menü entwerfen, möchten Sie das Beste aus einem ziemlich begrenzten Platz machen. Versuchen Sie also, das Menü nicht mit Optionen zu überladen, um die Besucher nicht zu verwirren. Stellen Sie außerdem sicher, dass die Menüpunkte kurz, knackig und leicht lesbar sind.

Danach können Sie mit dem Stil und der Animation des Menüs spielen, um Ihre Besucher bei jedem Schritt zu beschäftigen.

Haben Sie versucht, Ihrer Website ein mobiles Menü hinzuzufügen? Wie viele Optionen haben Sie eingeschlossen? Lassen Sie es uns in den Kommentaren unten wissen.