Baue barrierefreie Hamburger Menüs mit Offcanvas

Die Freiheit Offcanvas-Plugin ist eine von vielen Ressourcen für Schieberegler. Eine Reihe ähnlicher Plugins finden Sie online, Offcanvas zeichnet sich jedoch aus einigen Gründen aus.

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

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

Dies macht Offcanvas großartig für Mehr als nur gleitende Hamburgermenüs. Es kann für verwendet werden gleitende Benachrichtigungsbalken oder auch Opt-In-Felder zum Erfassen von E-Mails.

Jedes Panel funktioniert auf dieselbe Weise, wo der Benutzer dies kann Klicken Sie irgendwo auf die Seite, um das Schiebemenü auszublenden. Und du kannst Tastaturbefehle einrichten die gemäß den ARIA-Richtlinien ausgeführt werden, um eine ordnungsgemäße Webzugänglichkeit zu gewährleisten.

Um Offcanvas zu installieren, brauchen Sie nur eine Kopie von jQuery zusammen mit Offcanvas CSS / JS-Dateien. Sie können diese durch npm, bower oder direkt von GitHub ziehen.

Auch auf der GitHub-Seite wirst du Sehen Sie sich ein wenig Beispielcode an Sie können Ihre Website überarbeiten. Alles was Sie für das schiebende Navi brauchen, ist ein