Ein responsives, barrierefreies, horizontales, sticky Dropdown-Menü

Features:

• Funktioniert mit allen modernen Browsern, sowie auf allen Smartphones und Tablets.
• Valides HTML – Valides CSS
• Unterstützt die Navigation mit der Tastatur (ohne Maus), sowie Screen Reader für sehbehinderte Menschen. ¹⁾ Vielleicht das beste Dropdown-Menü für Tastaturnutzer?
• Eine eventuell gewünschte dritte Navigationsebene wird nicht als weiteres Dropdown bzw. Flyout dargestellt, sondern als zusätzliche Listenebene innerhalb des Dropdown-Panels. Dadurch wird das lästige Usability-Problem vermieden, wenn man mit der Maus versehentlich die Fläche des Dropdowns / Flyouts verlässt, und dadurch das Dropdown / Flyout unabsichtlich zuklappt.
• Untermenüs öffnen sich wahlweise (konfigurierbar) auf Mausklick oder beim Überfahren (hover) mit der Maus. Ich bevorzuge Ersteres. ³⁾
• Aus Usability-Gründen wird darauf verzichtet, Items im Hauptmenü, die ein Submenü öffnen, auch gleichzeitig zu verlinken.
• Mobil: Umfangreiche Untermenüs werden in einem scrollbaren Feld gezeigt.
• Menüeinträge können beliebig lang sein, und werden bei Bedarf umgebrochen.
• Bei sehr schmalem Viewport werden zu lange Einträge in der Hauptnavigation gekürzt und mit schließendem … (3 Punkte / Ellipsis) dargestellt.
• Farben, Schriften usw. können per CSS individuell angepasst werden. ²⁾

Anmerkungen

1) Tastaturnutzung

Mit der Tabulatortaste den Tab-Fokus auf einen der Top-Level-Menüpunkte setzen.

Wenn einer der Menüpunkte fokussiert ist (angezeigt durch ein nach rechts zeigendes Dreieck), wird durch Drücken der Enter-Taste, der Leertaste oder des Pfeils nach unten das Untermenü geöffnet, und durch Drücken der Pfeiltaste nach links oder rechts wird der Fokus auf den benachbarten Menüpunkt verschoben.

Links innerhalb der Untermenü-Panels sind in der Tabulatorfolge enthalten, wenn das Panel geöffnet ist. Sie können auch mit den Pfeiltasten oder durch Eingabe des ersten Zeichens im Linknamen navigiert werden, was die Tastaturnavigation erheblich beschleunigt.

Durch Drücken der Escape-Taste oder durch die Pfeiltasten rechts / links wird das Untermenü geschlossen und der Fokus auf die Hauptnavigation wiederhergestellt.

2) Anpassungen

Das Design lässt sich in der Datei /assets/css/style_page.css und /assets/css/style_navi.css individuell anpassen.

Recht einfach ist die Änderung von Farben. Die entsprechenden Stellen sind ausreichend kommentiert.

Ebenfalls unkritisch sind Schriften, sofern bei font-size nicht übertrieben wird.

Alle anderen Änderungen, insbes. Abmessungen wie width, margin, padding usw. erfordern brauchbare Kenntnisse in CSS, und müssen stets sorgfältig in allen Browsern sowie in mobilen Geräten getestet werden.

Installationshinweise in der Datei readme.txt (Link im Menü)

3) Hover vs. Klick/Tipp

Eine ausführliche Darstellung des Problems [english]

4) Test der Navigation in der Demo

Die Funktion der Navigation lässt sich testen mit der einzigen verlinkten Seite: Texte > Demo-Seite.
Alle anderen Links in der Demo sind inaktiv.

CC BY-SA 4.0 DE

jQuery-Plugin von Adobe Accessibility unter Apache License 2.0