SELF-Wiki: zugängliches Dropdown-Menü

[Matthias Scharwies]

Guten Morgen!

Stimmt absolut und ich freue mich schon auf Montag, wenn Du Gunnars Beispiel erklärst.

Hmm, ich habe mehr Fragen als Antworten ;-)

Hier ist der erste Schritt:

• Navigation/Dropdown-Menü

(weiter oben findet sich die CSS-Variante, in der ich mit Pseudoelementen Pfeile hinzugefügt habe.

Im folgenden Tutorial werde ich diese Pfeile als Buttons dynamisch erzeugen:

function dropdownExtension () {
	const submenus = document.querySelectorAll('nav li > ul');
	console.log(submenus)
    submenus.forEach(function (submenu) {
      submenu.classList.add('geändert');
	  let button = document.createElement('button');
	  button.setAttribute('aria-expanded','false')
	  let span   = document.createElement('span');
      let myText = document.createTextNode('Untermenü aufklappen');
      span.appendChild(myText);
	  span.classList.add('visually-hidden');
	  button.appendChild(span);
      submenu.before(button);
    });
}

Ist dieser Code so ok? Kann der gekürzt werden?

Mein weiterer Plan

Ich würde die li ul mit JS-Click so einblenden, indem ich ihnen eine Klasse gebe oder wegnehm.

Ohne JS wird mit :hover ja

nav ul ul { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}

Würdet ihr eine Klasse .visible einführen? Oder es ganz anders machen?

Im nächsten Schritt müsste man die Klasse visible entfernen, sobald Maus, Focus, oder Klick woanders ist.

Bitte gebt Euer Feedback!

Herzliche Grüße

Matthias Scharwies