XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)
-   -   Off Canvas Navigation mit Dropdown | nur CSS | barrierefrei (http://xhtmlforum.de/showthread.php?t=73102)

machomaaan 20.12.2016 16:04

Off Canvas Navigation mit Dropdown | nur CSS | barrierefrei
 
Hallo Leute,

ich möchte ein Off-Canvas-Menü mit mehreren Untermenüs (Dropdown) rein mit CSS erstellen. Das ganze soll natürlich mit der Tastatur (Tabulator) bedienbar sein.

Als Vorlage habe ich mir dieses Codepen Projekt genommen.

Weil das Off-Canvas-Menü in diesem Projekt nicht mit dem Tabulator öffnen geht (Hamburger-Button), hab ich diesen Code
Code:

input#off-canvas-menu {
  display: none;
}

durch diesen ersetzt
Code:

input#off-canvas-menu {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

Das Off-Canvas-Menü lässt sich jetzt mit dem TAB öffnen und man kann mit dem TAB auch durch das Menü navigieren.

Problem 1
Wenn ich ein Untermenü (Dropdown) öffnen möchte, muss ich den TAB zwischen dem Menüpunkt vor dem Dropdown und dem Dropdown selber stellen, quasi die nicht sichtbare Input-Checkbox. Nur dann kann man das Untermenü ebenfalls mit der Tastatur öffnen.
Hat dafür jemand eine Lösung?

Problem 2
Wenn ich zu einem Hauptmenüpunkt möchte, welcher nach einem Dropdown kommt, muss ich mit dem TAB durch die gesamten Untermenüpunkte des Dropdown's navigieren (welche aber ausgeblendet sind) bis ich zu dem gewünschten Hauptmenüpunkt komme.
Gibt es dafür eine Lösung?

Vielen Dank im Voraus für eure Mühen und Tipps!

Beste Grüße
Mario


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:47 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023