Off Canvas Navigation mit Dropdown | nur CSS | barrierefrei

machomaaan · #1 (**permalink**) 20.12.2016, 16:04

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
hover-Untermenüs beim Zeilenumbruch per CSS "mitnehmen"	HappyPOny	CSS	1	18.07.2015 14:52
Hilfe bei CSS Navigation	trimalchio	CSS	7	10.01.2011 14:13
Float-Problem?	mischaef	CSS	33	20.10.2010 17:20
Problem mit FlyOut Menu im IE7	quarki69	CSS	5	15.03.2010 16:46
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 19:18