Eine fullscreen responsive Navigation in Webflow bauen und animieren

Level:
Fortgeschritten 👍
Das Video kann nur angezeigt werden, wenn Cookies erlaubt sind.
Cookies akzeptieren und Medien laden
Ergebnis anschauen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Affiliate Link
Icon für einen externen Link

Viele nutzen die Standard Navigations-Komponente (Navbar), die dir in Webflow vorgefertigt zur Verfügung steht. Viele wissen jedoch nicht, dass du diese auch komplett an deine Bedürfnisse anpassen und individuell animieren kannst.

In diesem Tutorial bauen wir zusammen ein vollflächiges Navigations-Menü, welches komplett responsive ist und auch schon ab Desktop als Navigation eingesetzt werden kann.

Durch eine eigene öffnen und schließen Animation bekommt die Navigation zusätzlich einen ganz eigenen Charakter und hebt deine Website noch mehr von anderen ab.

Kapitel:

00:00 – Intro

01:00 – Aufbau Navigation

09:02 – In die standard Webflow Nav Componente übertragen

10:58 – Fullscreen Menü animieren

17:06 – Einzelne Navigationspunkte hintereinander animieren