Komplizierte Navigation *grumpf*

[Gunnar Bittersmann]

@@einsiedler

button.treeitemmain > aria-hidden="true" {display: none;}  
button.treeitem > aria-hidden="true" {display: none;}     

Da fehlen eckige Klammern.

Bedeutet einfach nur: Wenn java-script aus, dann werden alle Menüpunkte (also ul.group & div.nav-group) angezeigt + die Bottons (Sandwich + von den Untermenüs) verschwinden, da sie ja nicht gebraucht werden.

Ja, aber warum mit aria-hidden="true" und dem Umweg über CSS? Dass die Buttons (mit u) nicht gebraucht werden, ist für alle Nutzer so. Dafür ist das hidden-Attribut da.

([hidden] { display: none !important } im Stylesheet kann aber trotzdem nicht schaden.)

Nun aber wenn das Bildschirmfenster kleiner, zusammengezogen wird, also < 1400px ist

Dann soll der Sandwich-Botton sichtbar sein & ul.group mit den Untermenüpunkten unsichtbar […]

Das müsste irgendwie mit java-script geschehen, das aus aria-hidden="true" aria-hidden="false" wird.

Nein, warum JavaScript? (ohne Bindestrich, BTW) Das müsste irgendwie mit CSS geschehen – mit media query.

Bisher habe ich ein ganz einfaches script:

			if(ev.target.hasAttribute("aria-expanded") ){
				ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") ); 

Das ist auch erst auf den zweiten Blick erkennbar, dass damit zwischen "true" und "false" umgeschaltet wird. Einfach geht anders.

LLAP 🖖