Ein einfaches und intuitives Navigationsmenü ist eines der wichtigsten Designelemente Ihrer Website. Es fungiert wie eine Karte und führt Ihre Besucher über die Homepage hinaus. Da immer mehr Menschen das Internet auf ihren Mobilgeräten nutzen, sollte Ihre Website auch über ein mobilfreundliches Navigationsmenü verfügen.
Glücklicherweise hat Webflow es einfach gemacht, eine einklappbare Hamburger-Menüleiste hinzuzufügen, die Ihre mobile Website optimiert. 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 Designelement, wenn Sie mit begrenztem horizontalen Platz arbeiten. Es macht eine sperrige, feste Navigationsleiste überflüssig, die wertvollen Platz einnimmt.
Bei Webflow sind dieses Menü und seine Funktionen im NavBar-Element integriert. Um dieses Element zu Ihrem Design hinzuzufügen, sind vier einfache Schritte erforderlich:
- Tippen Sie oben im linken Bereich auf das „+“-Symbol, um den Bereich „Hinzufügen“ zu öffnen.
- Scrollen Sie nach unten zum Abschnitt „Komponenten“.
- Klicken und halten Sie das Element „NavBar“.
- Ziehen Sie das Element in die Kopfzeile der Seite.
So bearbeiten Sie das mobile Menü
Nachdem Sie Ihrer Website eine Navigationsleiste hinzugefügt haben, können Sie diesem Menü auf verschiedene Weise Stil und Persönlichkeit verleihen.
So fügen Sie dem Menü weitere Links hinzu
Das Navigationsleistenelement enthält die Menüschaltfläche und das Navigationsmenü, wobei letzteres die Navigationslinks enthält. Wenn Sie es zu Ihrem Design hinzufügen, werden mehrere Link-Platzhalter angezeigt, die Sie löschen oder mit Ihren Website-Links bearbeiten können.
Befolgen Sie diese Schritte, um weitere Navigationslinks hinzuzufügen:
- Klicken Sie auf ein beliebiges Element in der Navigationsleiste.
- Gehen Sie zum Bereich „Elementeinstellungen“ auf der rechten Seite.
- Drücken Sie auf das Zahnradsymbol, um die „Einstellungen“ zu öffnen.
- Scrollen Sie zum Abschnitt „NavBar-Einstellungen“.
- Tippen Sie auf die Schaltfläche „Link hinzufügen“.
Nachdem Sie nun über eine ausreichende Anzahl von Links für alle relevanten Seiten Ihrer Website verfügen, ist es an der Zeit, die eigentliche Verlinkung vorzunehmen.
- Wählen Sie einen Navigationslink aus.
- Gehen Sie zum Bereich „Elementeinstellungen“.
- Suchen Sie den Abschnitt „Linkeinstellungen“.
- Geben Sie die gewünschte Webseiten-URL in das Feld „URL“ ein.
So ändern Sie die Menüanimation
Auf Webflow können Sie auch ändern, wie das mobile Menü angezeigt wird, wenn Besucher auf die Menüschaltfläche klicken. Sie können zwischen drei Arten dieser Enthüllungsanimationen wählen:
- Dropdown – Standardmäßig wird das mobile Menü von der Navigationsleiste heruntergeklappt, sobald der Besucher auf die Menüschaltfläche tippt. Es nimmt die gesamte Breite des Browserfensters ein.
- Rechts oben – Wenn Sie diese Animation auswählen, wird Ihr mobiles Menü auf der rechten Seite des Bildschirms angezeigt. Dieses Menü nimmt die gesamte Höhe des Browserfensters ein.
- Über links – Dieser Menütyp ist identisch mit dem Menütyp „Über rechts“, außer dass das Navigationsmenü von der linken Seite Ihres Bildschirms verschoben wird.
Gehen Sie wie folgt vor, um die gewünschte Enthüllungsanimation einzustellen:
- Wählen Sie ein beliebiges Element in der Navigationsleiste aus.
- Gehen Sie zum Bereich „Elementeinstellungen“ auf der rechten Seite Ihres Bildschirms.
- Tippen Sie auf das Zahnradsymbol, um „Einstellungen“ zu starten.
- Navigieren Sie zum Abschnitt „NavBar-Einstellungen“.
- Klicken Sie auf die Option „Typ“.
- Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus.
Im Abschnitt „NavBar-Einstellungen“ können Sie außerdem Folgendes steuern:
- Easing Open: der Kurventyp, der zum Animieren des Öffnungsübergangs verwendet wird.
- Easing Close: der Kurventyp, der zum Animieren des Schließübergangs verwendet wird.
- Dauer: wie lange es dauert, bis das Menü angezeigt wird.
Beachten Sie, dass die Übergangsdauer in Millisekunden gemessen wird.
So ändern Sie den Menüstil
Mit Webflow können Sie jeden Teil der Navigationsleiste ganz einfach gestalten, sodass Sie das mobile Menü nahtlos in das Design Ihrer Website integrieren können.
Um die Menüschaltfläche zu gestalten, gehen Sie wie folgt vor:
- Wählen Sie die Menüschaltfläche.
- Gehen Sie zum Bereich „Stil“ auf der rechten Seite (das Pinselsymbol).
Über das Stilbedienfeld können Sie jeden Aspekt der Menüschaltfläche ändern. Am häufigsten ändern Designer die Hintergrundfarbe und -größe der Schaltfläche.
Um die Hintergrundfarbe zu ändern, gehen Sie wie folgt vor:
- Gehen Sie zum Abschnitt „Hintergründe“.
- Tippen Sie auf das Farbtropfensymbol, um die „Farbauswahl“ zu öffnen.
- Wählen Sie die gewünschte Farbe aus.
Wenn Sie die Größe des Hamburger-Symbols ändern möchten, gehen Sie folgendermaßen vor:
- Navigieren Sie zum Abschnitt „Typografie“.
- Erhöhen oder verkleinern Sie die Symbolgröße im Feld „Aa“.
Sie können die Farbe des Symbols auch im Feld oben ändern, das durch den Buchstaben A und einen Farbtropfen gekennzeichnet ist.
Obwohl es viele Möglichkeiten zum Anpassen der Menüschaltfläche gibt, können Sie sie nicht durch ein Textelement oder ein benutzerdefiniertes Bild ersetzen.
Mobile Navigation leicht gemacht
Beim Entwerfen eines mobilen Menüs möchten Sie den relativ begrenzten Platz optimal nutzen. Versuchen Sie daher, das Menü nicht mit Optionen zu überladen, um Ihre Besucher nicht zu verwirren. Stellen Sie außerdem sicher, dass die Menüoptionen kurz, klar und leicht lesbar sind.
Anschließend können Sie mit dem Menüstil und der Animation experimentieren, um das Interesse Ihrer Besucher bei jedem Schritt aufrechtzuerhalten.
Haben Sie versucht, Ihrer Website ein mobiles Menü hinzuzufügen? Wie viele Optionen haben Sie integriert? Lassen Sie es uns im Kommentarbereich unten wissen.
