In diesem Webflow Tutorial zeigt Jonas Arleth, wie man eine Split-Screen, Full-Screen Navigation mit Animation erstellt. Er stellt auch eine kostenlose Cloneable-Version zur Verfügung. Die Navigation kann auf Desktop als Overlay oder auf Tablet und Mobile als Full-Screen angezeigt werden. Jonas erklärt auch, wie man die Navigation in Komponenten aufteilen kann, um sie einfacher zu bearbeiten. Er zeigt verschiedene Animationseffekte wie Skalierung und Verschiebung und erklärt, wie man Stagger-Effekte für eine schrittweise Animation erstellt.

Erstelle eine Split-Screen Full-Screen Navigation in Webflow

Willkommen zu einem neuen Webflow Tutorial! Mein Name ist Jonas Arleth, und heute zeige ich dir, wie du eine Split-Screen Full-Screen Navigation mit Animation erstellst. Diese Navigation habe ich früher auf meiner Webflow Online-Kursseite verwendet und stelle sie dir jetzt kostenlos zur Verfügung. Du kannst sie einfach in dein Webflow Dashboard kopieren und für deine Projekte nutzen. Lass uns beginnen!

Einleitung

In diesem Tutorial führe ich dich Schritt für Schritt durch den Prozess, wie du diese Navigation in Webflow erstellst. Wir werden uns dabei auch einige interessante Animationstricks anschauen, die du möglicherweise noch nicht kennst. Falls du lernen möchtest, wie man solche Websites von Grund auf baut, empfehle ich dir meinen Webflow Onlinekurs, in dem ich alles von den Grundlagen bis hin zu fortgeschrittenen Techniken erkläre.

Aufbau der Split-Screen Navigation

Erstellen der Grundstruktur

Zuerst erstellen wir die Grundstruktur für unsere Split-Screen Navigation. Dazu erstellen wir einenDiv-Wrapper, der als Container für unsere Inhalte dient. Innerhalb dieses Wrappers erstellen wir zwei Divs für die linke und rechte Seite. Diese nennen wir left und right.

Styling und Positionierung

Nun stylen wir unsereDivs. Die linke Seite erhält 60% der Breite, während die rechte Seite 40% bekommt. Beide Seiten erhalten eine Hintergrundfarbe und einen Box-Shadow für eine leichte Tiefenwirkung. Das verleiht der Navigation ein elegantes und modernes Aussehen.

Inhalte hinzufügen

In die linke Seite fügen wir primäre Navigationslinks ein, während die rechte Seite für sekundäre Inhalte wie Blog-Teaser und Artikel-Links genutzt wird. Die Navigation auf der linken Seite kann flexibel gestaltet werden, sodass sie entweder primäre oder sekundäre Menüpunkte enthält.

Hinzufügen der Animationen

Erstellen der Animationen

Um die Animationen zu erstellen, nutzen wir die Webflow Interactions. Dabei fügen wir eine ”Navigation opens” hinzu, bei der die linke Seite von links und die rechte Seite von rechts in den Bildschirm hinein animiert werden. Dies sorgt für einen dynamischen und ansprechenden Einstieg, wenn die Seite geladen wird.

Hinzufügen von Hover-Effekten

Um den Links in der Navigation einen interaktiven Effekt zu verleihen, fügen wir einen Scale on Hover-Effekt hinzu. Dieser sorgt dafür, dass die Links beim Hovern leicht größer werden, was dem Nutzer ein visuelles Feedback gibt und die Benutzerfreundlichkeit erhöht.

Abschluss und Feinschliff

Optimierung für mobile Geräte

Damit die Navigation auch auf mobilen Geräten gut aussieht, setzen wir Media Queries ein, um die Darstellung entsprechend anzupassen. Auf kleineren Bildschirmen werden die beiden Seiten übereinander anstatt nebeneinander angezeigt, und die Box-Shadows werden entfernt, um eine klarere und einfachere Ansicht zu gewährleisten.

Integration und Testen

Zum Abschluss integrieren wir die Navigation in unsere Webflow-Seite und testen sie auf verschiedenen Geräten und Bildschirmgrößen, um sicherzustellen, dass alles wie gewünscht funktioniert. Dabei überprüfen wir, ob die Animationen flüssig laufen und die Navigation benutzerfreundlich bleibt.

Fazit

Mit dieser Anleitung hast du nun eine moderne, interaktive Split-Screen Full-Screen Navigation in Webflow erstellt. Diese Navigation ist nicht nur optisch ansprechend, sondern auch funktional und vielseitig anpassbar. Wenn du tiefer in das Thema Webflow und Webdesign einsteigen möchtest, empfehle ich dir, meinen umfassenden Online-Kurs zu besuchen. Viel Spaß beim Ausprobieren und Gestalten deiner eigenen Webflow-Projekte!

‍