Erstellen Sie mit diesem jQuery-Plugin ein intelligenteres responsives Navigationsmenü

Jeder moderne Standort braucht eine responsives Layout und ein nutzbare Navigation. Das ist eine gegebene.

Aber Hamburger Menüs können nur so weit gehen radikal die Usability verändern für unterschiedliche Bildschirmgrößen. Der bessere Weg, um damit umzugehen, ist von Links schrittweise ausblenden mit einem Plugin wie OkayNav.

Dieses kostenlose jQuery-Plugin fügt eine sehr einfache Menüfunktion hinzu zu jeder Seite und es sverdeckt die Navigationselemente, basierend auf verschiedenen Ansichtsfenstern. Auf diese Weise haben Smartphone-Benutzer das einzige Hamburger-Menü, aber auch Tablet-Benutzer sehen einige Links.

Standardmäßig ist es auf a angewiesen

Element und ein lange ungeordnete Liste. Bisher glaube ich nicht, dass dieses Plugin mehrstufige Dropdowns unterstützt, aber wenn Sie ein bisschen jQuery kennen, könnten Sie dies selbst hinzufügen.

OkayNav ist extrem einfach und das ist es für einfachere Websites gedacht die nur eine Handvoll Navigationslinks haben. Diese Links verstecken Sie sich langsam hinter einem Off-Screen-Menü sobald sie auf ein bestimmtes viewport treffen und Weitere Links verstecken sich Je kleiner der Browser wird.

Du musst es tun wickeln Sie Ihre ungeordnete Liste ein in einem Navigationselement und geben Sie ihm eine bestimmte ID. Dann kannst du ziele auf das gesamte nav mit dem okayNav () Funktion wie folgt:

 var navigation = $ ('# nav-main'). okayNav ();

Beachten Sie, dass dies nur der ist einfachstes Setup ohne benutzerdefinierte Funktionen. Sie können mit arbeiten über ein Dutzend benutzerdefinierte Optionen in diese Bibliothek integriert, um den Symbolstil, die Menüanimation, die Unterstützung für Wischen und die Rückruffunktionen zu steuern.

Und Sie können das Menü sogar anrufen nach Belieben öffnen / schließen durch Übergeben bestimmter Werte an die Funktion. Hier ist ein einfaches Beispiel dafür Öffnen Sie die Navigation:

 navigation.okayNav ('openInvisibleNav');

Alle diese Codes sind im Dokument gut dokumentiert GitHub-Repo Dies beinhaltet auch einen Download des Skripts. Wenn Sie die CDN-Route bevorzugen, können Sie auch die RawGit-Link um dieses Skript direkt aus GitHub hinzuzufügen.

OkayNav ist ideal für kleinere Standorte die von der progressiven Navigationstechnik profitieren. Wenn Sie sich jedoch noch nicht sicher sind, wie das funktioniert, lesen Sie diese Demo zu CodePen, die zeigt, was dieses kleine Plugin kann.