10 CSS- und JavaScript-Code-Snippets zum Erstellen reaktionsschneller Navigationen

Einer der komplexesten Teile einer guten, responsiven Website ist die Navigation. Es kann eine Weile dauern, bis Sie das herausfinden, und es gibt viele Tutorials, die Ihnen dabei helfen. Aber ich bin auch ein Fan von Codeschnipseln wie denen, die wir für diesen Artikel gesammelt haben.

Alle diese responsiven Navigations-Snippets können Sie kostenlos bearbeiten und für Ihre eigenen Projekte klonen. Sie verfügen auch über eine Vielzahl von Stilen, sodass hier etwas dabei sein wird, das für alle Arten von Websites funktioniert.

1. Responsive Fullpage-Layout von Johnny Mango

Dieses responsive Beispiel zeigt, wie weit man in der Prototyping-Phase einer Website gehen kann. Sie werden feststellen, dass die Navigation eine interessante Funktion hat, wenn Sie mit der Maus darüber fahren und Links automatisch fokussieren. Dieser Effekt kann auf einer „Live“-Website mit der gleichen Navigation geändert werden, aber in diesem Beispiel ist es nützlich, die UI/UX der Seite zu zeigen.

Sehen Sie sich die Pen Responsive Navigation Demo mit Kube von Johnny Mango an

2. Dropdown-Navigationsleiste von Tania Rascia

Wenn Sie längere Dropdown-Elemente in Ihrer Navigation benötigen, funktioniert dieses Menü möglicherweise besser. Es ist eine starke Alternative zu den einfacheren Navigationen, die nur eine Handvoll Menüpunkte enthalten. In diesem Fall finden Sie eine einfache Liste von Links mit einem sehr kleinen Dropdown-Menü. Die Untermenü-Links erscheinen nur bei einem Click-Event, das von jQuery verarbeitet wird. Sie könnten das auf Nur-CSS ändern, aber Sie verlieren den Klick-Trigger.

Dennoch bin ich überrascht, wie viel Vielseitigkeit dieses Snippet Entwicklern bietet, für ein so sauberes Design.

Siehe Pen Responsive Dropdown Navigation Bar von Tania Rascia

3. Einzelseiten-Layout von Jan Czizikow

Einseitige Navigationsmenüs brauchen genau wie alle anderen Liebe. Dies ist ein perfektes Beispiel für die Einzelseitennavigation in Aktion. Die Links scrollen mit einer flüssigen Animation nach unten, lassen Sie aber nicht zu lange warten.

Ganz zu schweigen davon, dass sie unabhängig von Ihrer Browsergröße automatisch auf die perfekte Größe angepasst werden. Ich würde diese Art der Navigation meistens für eine Verkaufsseite oder eine einfache Portfolioseite empfehlen. Es ist sauber und bietet neben den reaktionsschnellen Techniken einige hervorragende Animationsfunktionen.

Sehen Sie sich den Stift an Vollständig ansprechende Navigation mit CSS-Animationen und jQuery von Jan Czizikow

4. Rotes Dropdown-Menü von Stephanie Walter

Entwicklerin Stephanie Walter hat einige spannende Projekte für das Web gebaut. Dieses Snippet ist nur ein Beispiel für eine leuchtend rote, responsive Navigation.

Die Links haben ein bisschen mehr Schwung mit einer benutzerdefinierten Funktion und einem netten Hover-Effekt zum Booten. Wenn Sie die Größe ändern, werden Sie feststellen, dass die Navigation stattdessen ein gleitendes Dropdown-Menü verwendet. Ich würde mich fast für eine Liste von Links auf Blockebene für Mobilgeräte entscheiden, aber das funktioniert viel besser, wenn man das Untermenü berücksichtigt.

Siehe Pen Responsive Navigation Multilevel von Stephanie Walter

5. Reines CSS-Design von Ahmad Hjazy

Hier ist ein einzigartiges Design mit reinem CSS für die Navigation. Es ist ein vertikales Menü mit Navigationslinks, die das Periodensystem der Elemente nachahmen.

Die Hover-Effekte sind etwas verzögert, aber zweifellos interessant. Ganz zu schweigen davon, dass der ansprechende Stil überraschend brauchbar ist. Der vielleicht beeindruckendste Teil ist, wie dieses gesamte Beispiel ausschließlich CSS verwendet .

Siehe Pen CSS Responsive Navigation Menu von Ahmad Hjazy

6. Responsive Sticky Header von Marc Libunao

Ich habe das Single-Page-Design in einem früheren Snippet erwähnt, und dieser responsive Header folgt einem ähnlichen Verlauf. Der einzige Unterschied besteht darin, dass diese Navigation einen etwas größeren Block auf der Seite hat und das responsive Seitendesign etwas anders handhabt.

Wenn Sie die Größe des Browsers ändern, werden Sie feststellen, dass dieses Beispiel das Hamburger-Symbol mit einer lustigen Animation verwendet. Es ist schön, wenn man den Stil bedenkt, aber es ist vielleicht nicht jedermanns Sache.

Siehe Pen Responsive Sticky Header Navigation von MarcLibunao

7. Responsive & Touch-Friendly von Dragoeco

Alle guten Websites sollten standardmäßig berührungsfreundlich sein, und das macht diese Navigation für Designer noch attraktiver.

Jeder Link führt zu einer neuen Seite, aber Sie können auf jedem berührungsbasierten Gerät problemlos auf die Dropdown-Menüs tippen, um sie zu bewegen. Diese Funktion fehlt oft in Navigationsmenüs, und das ist einer der Gründe, warum das Design von Dropdowns schwierig sein kann.

Siehe Pen Drop-Down Navigation: Responsive and Touch-Friendly von Dragoeco

8. Einfache Navigationslinks von AnabolicHippo

Wenn ich an einfache Navigationsmenüs denke, denke ich an ein solches Design. Jeder Link erscheint als eigenes Blockelement, auch auf kleineren Bildschirmen. Es gibt kein Hamburger-Menü und keine versteckte animierte Menüfunktion. Stattdessen werden die Links in der Größe angepasst und in separate Zeilen aufgeteilt.

Der schwierigste Teil ist der Umgang mit dem Dropdown-Effekt auf Mobilgeräten. Viele der Links haben Untermenüs und funktionieren auf kleineren Bildschirmen genauso.

Ich würde argumentieren, dass dies am besten für Websites mit wenigen oder keinen Untermenüs funktioniert, aber es lohnt sich, es auf dem Handy zu versuchen, um zu sehen, was Sie von der Erfahrung halten.

Siehe Pen Responsive Navigation Menu von AnabolicHippo

9. Playstation Curtain Menu von Louis Chenais

Entwickler Louis Chenais hat eine meiner liebsten reaktionsschnellen Navigationen basierend auf der PlayStation-Website erstellt. Louis nennt dies ein „Vorhangmenü“, bei dem es ins Blickfeld gleitet und die gesamte Seite einnimmt. Dies ist bei mobilen Schnittstellen üblich und wird auch bei Webdesignern schnell populär.

Eine Sache, die ich wirklich mag, ist der Animationsstil. Es ist schlank und schnell genug, um die Links anzuzeigen, ohne dass sich die Benutzer langweilen. Und das Beste ist, dass es sich so anfühlt, als könnte es auf einer Produktionswebsite funktionieren.

Siehe Prinzip Nr. 3 der Pen Responsive Navigation – The Curtain Menu von Louis Chenais

10. Ansprechendes Mega-Menü von Samir Alley

Sie können das Internet durchsuchen und Hunderte von Beispielen für Mega-Navigationsmenüs finden. Diese erscheinen normalerweise auf größeren Blogs und Nachrichten-Websites, sind aber auch in E-Commerce-Shops oder auf großen Agenturseiten beliebt. Der schwierigste Teil eines Mega-Menüs besteht darin, es vollständig reaktionsfähig zu machen. Dank dieses kleinen Schnipsels können Sie das Design des Mega-Menüs problemlos an jeden Bildschirm anpassen.

Auf Mobilgeräten verwendet es eine Gleitnavigation, um alle internen Links in einem Menü anzuzeigen. Das mag etwas lästig erscheinen, aber Sie können auch jQuery verwenden, um die Unterlinks auszublenden, wenn dies sinnvoll ist. Es ist immer noch eine der besten reaktionsschnellen Lösungen, die ich gesehen habe, um ein Mega-Menü auf dem Desktop auszuführen, ohne mobile Benutzer zu entfremden.

Siehe Pen Responsive Mega Menu – Navigation von samir alley