Webflow Menü nach Klick automatisch schließen | Verlinkung auf Sektionen

In diesem Tutorial wird die Nutzung der Webflow-Navigation erläutert, insbesondere die Verlinkung von Seiten und Ankern. Wie verlinkt man auf eine Sektion von einer anderen Seite aus? Und wie schließt sich die Navigation automatisch, wenn man auf einen Bereich auf der Seite verlinkt?
Jonas Arleth erklärt, wie man Ankerlinks erstellt, die Navigation optimiert und häufige Probleme löst, die Benutzer bei der Verwendung von Webflow Navigations-Komponenten haben. Es wird betont, wie wichtig es ist, die richtigen Einstellungen für eine reibungslose Benutzererfahrung vorzunehmen.

Takeaways

• Die Standard-Webflow-Navigation ermöglicht Ankerverlinkungen.
• IDs für Sektionen sollten ohne Leerzeichen und mit Bindestrichen erstellt werden.
• Die Navigation schließt sich automatisch, wenn auf einen Link geklickt wird
• Ein Override-Property kann helfen, spezifische Links zu erstellen.
• Die Navigation sollte auf der Home-Seite anders konfiguriert werden als auf Unterseiten.
• Webflow bietet eine einfache Möglichkeit, Ankerlinks zu erstellen.

So behebst du das Problem mit nicht schließenden Navigationsmenüs in Webflow

Einleitung

Als Webdesigner möchtest du deinen Besucher:innen ein optimales Nutzererlebnis bieten. Ein häufig auftretendes Problem in Webflow ist, dass sich das Navigationsmenü nach dem Klicken auf einen Ankerlink nicht automatisch schließt—besonders auf mobilen Geräten. In diesem Tutorial zeige ich dir, warum dieses Problem auftritt und wie du es lösen kannst.

Die Webflow-Navigation verstehen

Webflow bietet eine Standard-Navigationskomponente, die du unter "Advanced" findest. Mit dieser kannst du:

• Ankerlinks erstellen: Verlinke direkt zu bestimmten Sektionen deiner Seite.
• Sektionen IDs zuweisen: Gib deinen Sektionen eindeutige IDs (z. B. about, projects), um sie in der Navigation anzusteuern.

Das Problem: Menü schließt sich nicht

Wenn du die Navigation auf mobilen Geräten öffnest und auf einen Ankerlink klickst, bleibt das Menü manchmal geöffnet. Das stört die Nutzererfahrung und wirkt unprofessionell.

Warum passiert das?

• Falsche Link-Auswahl: Statt der "Page-Section-Verlinkung" verwendest du möglicherweise eigene URLs mit /#section-id.
• Webflow erkennt den Link nicht als internen Anker: Dadurch wird das Schließen des Menüs nicht automatisch ausgelöst.

Die Lösung: Override Properties nutzen

Um das Problem zu beheben, kannst du Override Properties bei deiner Navigations-Komponente  verwenden, um auf Seiten unterschiedliche Link-Einstellungen vorzunehmen.

Schritt-für-Schritt-Anleitung

Navigation in eine Komponente umwandeln:

• ‍‍Erstelle aus deinem Navigationsmenü eine wiederverwendbare Komponente, z. B. Navigation.

Standardlinks mit Custom URLs versehen:

• Ändere die Links zu deinen Sektionen in /#section-id (z. B. /#about). Dies dient als Standard für alle Unterseiten.

Override Properties auf der Startseite erstellen:

• Wähle den Navigationslink aus.
• Klicke auf das Plus-Symbol neben "Link" und erstelle ein Override Property.
• Stelle den Link auf "Page-Section-Verlinkung" und wähle die entsprechende Sektion aus.
• Dadurch erkennt Webflow den Link als internen Anker und schließt das Menü automatisch bei Klick.

Fazit

Mit dieser Methode stellst du sicher, dass sich dein Navigationsmenü nach dem Klicken auf einen Ankerlink automatisch schließt. Das verbessert die Benutzerfreundlichkeit und verleiht deiner Website ein professionelleres Erscheinungsbild.