Komplizierte Navigation *grumpf*

[einsiedler]

Hallo liebe Forumer, ich benötige nocheinmal eure Unterstützung: Wie ihr hier seht komme und komme ich einfach mit meiner Navigation nicht weiter. Ich habe alles auf Papier durchgespielt aber mein Hirn hat sich inzwischen so verknotet das es nicht mehr will. Sicherlich gibt es eine (sehr) einfache Lösung (warscheinlich das!). Deshalb benötige ich eure Hilfe!

Ersteinmal die Basics, hier mein html:

		<div class="contentspan">
				<a class="anzume" href="#main-nav">zum Hauptmenü</a>
				<nav id="main-nav">
					<ul class="tree" role="tree" aria-labelledby="main-nav">
						<li role="treeitem">
							<button aria-hidden="true" aria-expanded="true" class="treeitemmain"><span class="visually-hidden">HauptNavigation</span></button>
								<ul class="group" role="group">

									<li role="treeitem">
										<a class="a-link" href="http://www.example.com/aktuell.html">Aktuelles</a>
										<button aria-hidden="true" aria-expanded="true" class="treeitem"><span class="visually-hidden">SubNavigation Item 1</span></button>
										<div class="nav-group" role="group">
											<a class="a-sublink" href="http://www.example.com" role="treeitem">aktuelle Ausstellungen</a>
										</div>
									</li>

									<li role="treeitem">
										<a class="a-link" href="http://www.example.com/arbeiten.html">Arbeiten</a>
										<button aria-hidden="true" aria-expanded="true" class="treeitem"><span class="visually-hidden">SubNavigation Item 2</span></button>
										<div class="nav-group" role="group">
											 <a class="a-sublink" href="http://www.example.com" role="treeitem">Drifters, 2012</a>
											 <a class="a-sublink" href="http://www.example.com" role="treeitem">Waldfrieden, 2006</a>
										</div>
									</li>

									<li role="treeitem">					
										<a class="a-link" href="http://www.example.com/cv.html">Curriculum Vitae</a>
										<button aria-hidden="true" aria-expanded="true" class="treeitem"><span class="visually-hidden">SubNavigation Item 3</span></button>
										<div class="nav-group" role="group">
											 <a class="a-sublink" href="http://www.example.com" role="treeitem">Lebenslauf</a>
											 <a class="a-sublink" href="http://www.example.com" role="treeitem">Studium & Stipendien</a>
										</div>
									</li>

								</ul>
						</li>
					</ul>
				</nav>
		</div>

Nun das CSS und ich gehe hier vom Standpunkt aus, das alle scripte deaktiviert sind:

[aria-hidden="true"] {display: none!important;}
.hidden {display: none!important;}

ul.group {hier: alles nötige das das sichtbar ist}
div.nav-group {hier: alles nötige das das sichtbar ist}  

Bottons:

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

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.

So weit so geschmeidig:

weiter gehts:

Nächster Fall: java-script an & großer Bildschirm

Der Botton (Sandwich): button.treeitemmain > aria-hidden="true" {display: none;} ist also immer noch nicht sichtbar, gut so, soll so sein (wird hier ja auch nicht gebraucht!).

Nun aber müssen/sollen die Unternavigationspunkte von div.nav-group nicht mehr angezeigt werden, die kann man ja bei Interesse öffnen/schließen.

So, mit großen Bildschirm meine ich einen Bereich größer als 1400px + .

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

Wenn botton.treeitemmain + aria-hidden="true" ist soll es zu botton.treeitemmain + aria-hidden="false" werden Also wird hier das Sandwich angezeigt und nicht das Kreuz & somit NICHT die Untermenüpunkte

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

Bisher habe ich ein ganz einfaches script:

<script>
		
		function globalClickManager(ev){
			// ev.target gibt uns das Element auf dem der Click geschah.

			// steuere expanded Buttons
			if(ev.target.hasAttribute("aria-expanded") ){
				ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") ); 
			}
			// Buttons die lediglich den Click transferieren ähnlich zu label Elementen
			else if(ev.target.hasAttribute("data-for-id") ){
				document.getElementById( ev.target.getAttribute("data-for-id") ).click();
			}
			else if( Element.prototype.closest){
				if( ev.target.closest("nav") == null ){
					var temp = document.querySelector("nav > [aria-expanded='true']");
					if(temp) temp.setAttribute("aria-expanded","false");
				}
			}
		}
		function init(){
			var col = document.querySelectorAll("nav > [aria-expanded]");
			for(var i=0; i<col.length; i++){
				col[i].setAttribute("aria-expanded","false");
			}
			document.body.addEventListener("click",globalClickManager);
		}
		document.addEventListener("DOMContentLoaded", init, false);
	</script>

Doch ich kenne mich da überhaupt nicht aus mit wo eben dieser Zusatz hinkommt.

Ich weiß inzwischen das man mit breite = Window.innerWidth; die fensterbreite bestimmen kann. Das sollte mit hilfreich sein wegen dieser 1400px Marke.

Doch leider versage ich hier kläglich und ich komme nicht weiter.

Sicherlich gibt es warscheinlich eine ganz einfache Lösung die mir nicht einfällt.

Wer kann mir hier helfen , wenn nötig auch gegen Bezahlung. Ich möchte endlich mal weiterkommen.

Achso, hier eine mit dem einfachen script laufende Version, eine allererste Version, die zeigt wie ich es mir denke: Version A (Ja, ist fehlerhaft, ich weiß!)

Mit der Bitte um Unterstützung,

der einsiedelnde