Versionen dieses Beitrags

Komplizierte Navigation *grumpf*

Missing einsiedler
  • Komplizierte Navigation *grumpf*
  • Hallo liebe Forumer,
  • ich benötige nocheinmal eure Unterstützung:
  • [![Arbeitsplatz](/images/83e0ae5e-2b6e-4a48-ba49-445fff8599aa.jpg?size=medium "Arbeitsplatz")](/images/83e0ae5e-2b6e-4a48-ba49-445fff8599aa.jpg)
  • 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:
  • ~~~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:
  • ~~~CSS
  • [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:
  • ~~~JavaScript
  • <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:
  • **Achso, hier eine mit dem einfachen script laufende Version, eine allererste Version, die zeigt wie ich es mir denke:
  • [Version A](http://misanthrop.bplaced.net/test/demowebsiteE/index_v1.html)
  • (Ja, ist fehlerhaft, ich weiß!)
  • (Ja, ist fehlerhaft, ich weiß!)**
  • Mit der Bitte um Unterstützung,
  • der einsiedelnde

Komplizierte Navigation *grumpf*

Missing einsiedler
  • Komplizierte Navigation *grumpf*
  • Hallo liebe Forumer,
  • ich benötige nocheinmal eure Unterstützung:
  • [![Arbeitsplatz](/images/83e0ae5e-2b6e-4a48-ba49-445fff8599aa.jpg?size=medium "Arbeitsplatz")](/images/83e0ae5e-2b6e-4a48-ba49-445fff8599aa.jpg)
  • 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:
  • ~~~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:
  • ~~~CSS
  • [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:
  • ~~~JavaScript
  • <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, zeigt wie ich es mir denke:
  • Achso, hier eine mit dem einfachen script laufende Version, eine allererste Version, die zeigt wie ich es mir denke:
  • [Version A](http://misanthrop.bplaced.net/test/demowebsiteE/index_v1.html)
  • (Ja, ist fehlerhaft, ich weiß!)
  • Mit der Bitte um Unterstützung,
  • der einsiedelnde

Komplizierte Navigation *grumpf*

Missing einsiedler
  • Komplizierte Navigation *grumpf*
  • Hallo liebe Forumer,
  • ich benötige nocheinmal eure Unterstützung:
  • [![Arbeitsplatz](/images/83e0ae5e-2b6e-4a48-ba49-445fff8599aa.jpg?size=medium "Arbeitsplatz")](/images/83e0ae5e-2b6e-4a48-ba49-445fff8599aa.jpg)
  • 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:
  • ~~~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:
  • ~~~CSS
  • [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:
  • ~~~JavaScript
  • <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, zeigt wie ich es mir denke:
  • [Version A](http://misanthrop.bplaced.net/test/demowebsiteE/index_v1.html)
  • (Ja, ist fehlerhaft, ich weiß!)
  • Mit der Bitte um Unterstützung,
  • der einsiedelnde