Build Accessible Sliding Hamburger Menüs mit Offcanvas

Das kostenlose Offcanvas-Plugin ist eine von vielen Ressourcen für gleitende Navigationen. Sie können eine Reihe ähnlicher Plugins online finden, aber Offcanvas sticht aus ein paar Gründen heraus.

Es ist eine ziemlich leichte Bibliothek und während es auf jQuery läuft, ist es auch nicht sehr schwierig einzurichten . Dies gilt sowohl für den JavaScripts-Code als auch für den HTML-Code. Daher müssen Sie Ihre Standardnavigation nicht viel ändern.

Mit dem Offcanvas-Plugin können Sie bestimmte Bereiche festlegen , in denen das Menü angezeigt werden soll . Standardmäßig ist dies normalerweise die linke oder rechte Seite des Bildschirms, aber Sie können auch den oberen oder unteren Bildschirmrand auswählen.

Dies macht Offcanvas großartig für mehr als nur Hamburger-Menüs. Es kann zum Verschieben von Benachrichtigungsleisten oder sogar zum Aktivieren von E-Mails verwendet werden .

Jedes Fenster funktioniert auf dieselbe Weise, wenn der Benutzer auf eine beliebige Stelle auf der Seite klicken kann, um das verschiebbare Menü auszublenden . Außerdem können Sie Tastaturbefehle einrichten, die konform mit den ARIA-Richtlinien für eine ordnungsgemäße Webzugänglichkeit ausgeführt werden.

Um Offcanvas zu installieren, benötigen Sie nur eine Kopie von jQuery zusammen mit den Offcanvas CSS / JS-Dateien . Sie können diese durch NPM, Bower oder direkt von GitHub ziehen.

Auch auf der GitHub-Seite sehen Sie ein wenig Beispielcode, den Sie für Ihre Website anpassen können. Alles, was Sie für das gleitende Navi brauchen, ist ein