Navigation

Fullscreen Webflow Navigation + Animation

Level:

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.

Das fertige Ergebnis:

https://webflow-lernen.webflow.io/simple-fullscreen-mobile-navigation-in-webflow

Projekt klonen:

Direkt im Webflow Designer öffnen

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