Drei CSS -Alternativen zur JavaScript -Navigation

Werden Sie im Navigationsdesign der Website JavaScript zur Implementierung von Hamburger -Menüs verwendet? Tatsächlich gibt es einfachere und einfachere Zugriff auf Alternativen. In diesem Artikel werden drei Navigationsmodi ohne JavaScript eingeführt, um die Benutzererfahrung zu verbessern und die Zugänglichkeit der Website zu verbessern.

Befolgen Sie das Prinzip der schrittweisen Verbesserung, priorisieren Sie das Erstellen von Webseiten für Benutzer, die alte Versionen oder schwächere Technologien verwenden, und fügen Sie dann schrittweise verbesserte Funktionen hinzu. Wenn die Grundtechnologie ein Qualitätserlebnis bieten kann, müssen Sie sich nicht auf JavaScript verlassen. Das Vermeiden von JavaScript in der Navigation stellt sicher, dass Benutzer die Website normalerweise weiterhin durchsuchen können, auch wenn JavaScript deaktiviert ist oder wenn das Skript aufgrund von Netzwerkproblemen nicht geladen wird.

Schauen wir uns drei Alternativen zum JavaScript -Burger -Menü an:

Alternative Lösung 1: Unabhängige Menüseite

Die Navigation muss nicht immer am Kopf jeder Seite stehen. In Situationen, in denen Front-End-Websites oder mehr Navigationsprojekte verfügbar sind, ist es möglicherweise praktischer, eine separate Seite zu erstellen, um alle Navigationslinks aufzulisten. WordPress -Thema Susty nimmt diesen Ansatz an.

Dieser Modus eignet sich besonders für statische Websites, die das Dateisystem -Routing verwenden. Wenn das Projekt mit einem statischen Website -Generator erstellt wird, kann die Seite schneller geladen werden, als der Benutzer erkennen kann, und die Vorlagen sind auch modularer.

Ersetzen Sie einfach die Menü -Taste durch die Schaltfläche Schließen. Es gibt verschiedene Möglichkeiten, den Benutzer beim Klicken auf die Schaltfläche Schließen auf die vorherige Seite zurückzubringen. Wenn Sie ein serverseitiges CMS (z. B. WordPress) verwenden, können Sie $_SERVER['HTTP_REFERER'] verwenden, um die vorherige URL zu erhalten und auf die URL der Schließung zu setzen.

Wenn jedoch nicht die serverseitigen Einstellungen verwendet werden, sind möglicherweise mehrere Zeilen des JavaScript-Codes erforderlich, um die vorherige URL zu erhalten.

 <code><a href="https://www.php.cn/link/61c68ac879a7ec23b78912aa04f59d78" onclick="handleClick(event)">×</a> function handleClick(event) { event.preventDefault(); window.history.back(); return false; }</code>

Während dieser Ansatz und dieser Muster gut sind, erfordern bestimmte Projekte möglicherweise JavaScript.

Alternative zwei: Horizontales Rollen

Diese Methode eignet sich für Situationen, in denen die Linkliste kurz ist, und Benutzer können auf alle Navigationselemente zugreifen, ohne etwas zu öffnen oder die aktuelle Seite zu verlassen. GitHub verwendet diese Methode in seinem Untermenü.

Verwenden Sie einfach eine Kombination aus Scroll -Überlauf in Flexbox und CSS!

Alternative drei: reines CSS -Burger -Menü

Der Hamburger -Menümodus verwendet normalerweise JavaScript, dies ist jedoch nicht erforderlich. Mit CSS-Pseudo-Selektoren und HTML können Sie ein reichhaltiges mobiles Menü erstellen und JavaScript für andere Funktionen verwenden, die es wirklich erfordern.

Es ist zu sehen, dass beliebte Konventionen nicht bedeutet, dass sie der einzige Weg sind. Es gibt oft einfachere und einfachere Zugangsmethoden, insbesondere wenn es um die Navigation geht. Das Erstellen von JavaScript-freier funktionaler, leichter und immersiver Navigation ist mühelos und hat einige zusätzliche Vorteile. Wenn Sie einen interessanten CSS -Navigationsmodus erstellt haben, teilen Sie ihn bitte in den Kommentaren mit!

Das obige ist der detaillierte Inhalt vonDrei CSS -Alternativen zur JavaScript -Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!