zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Off Canvas Navigation mit Dropdown | nur CSS | barrierefrei

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.12.2016, 15:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
barrierefrei, css, dropdown men, off canvas

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:56 Uhr.