Warte kurz mal, mir fällt da etwas ein, und zwar kann man die aktuelle Bildschirmbreite mit js ermitteln?

Wenn ja könnte man doch eine "Art Weiche" (in Anführungszeichen) bauen wenn das Bildschirmfenster kleiner als 1400px ist.

Und dann alles so wie in meinem Post #10

Bisher läuft bei mir alles mit aria-expandet wunderbar, die Buttons zwitchen/verändern sich (von Sandwich zu X & Pfeil down zu pfeil up)

Wenn man nun aus Ausgangslage anfangs alle aria-expandet = "true" setzen würde also im html

und dann halt weiterlesen Post #10

Prima, nun was wenn man sagt (IF) Bildschirmfenster kleiner < 1400px

dann bei button class="treeitemmain hidden" soll das hidden verschwinden

UND sämtliche (es sind mehrere) button class="treeitem" aria expandet="true"

wird zu button class="treeitem" aria expandet="false"

Ich glaube DAS in javascript damit wäre mir geholfen.

:o)

Würde mich mal interessieren das auszuprobieren.

Ich habe bisher DAS als mein html

Lieben Gruß der einsiedelnde

Hehe... Danke!

Also es funktioniert schon prima, aber meinerseits habe ich ein Denkfehler.

Zur Erläuterung:

Sie mal:

Zum einen ist da der Sandwich-Button bzw das X zum wieder schließen .

Damit öffnet / schließt man das Untermenü

Des weiteren sind da die Untermenü-Buttons, die Pfeile auf und ab damit öffnet und schließt man die Untermenü-Punkte (Abb. ganz rechts)

Dein script muss um wenige Zeilen erweitert werden.

ich hab folgendes (habe es ein wenig modifiziert & geändert):

Damit : wenn das Bildschirmfenster < 1400px ist ==> setze ich den (obersten) Sandwich Button ==> aria-expandet="false"

& der Sandwich-Button wird sichtbar.

es fehlt NUN nur noch folgendes:

wenn Bildschirmfenster größer > 1400px ist dann sollen die .treeitem Buttons aria-espandet="false" werden

& das hidden von <button class="treeitem hidden" aria-expanded="true" .... muss dann verschwinden .

Das benötige ich noch für den Fall wenn javascript AN ist.

Kannst Du das noch ergänzen, bitte?

EDIT:

Achso: da Fällt mir gerade etwas auf, denn wenn man das Bildschirmfenster wieder größer zieht nachdem es kleiner als

1400px gezogen wurde, dann muss der .treeitenmain Button wieder verschwinden, also der (oberste) Sandwich-Button.

Kann man das irgendwie hinbekommen?

Ich denke DANN ist alles perfekt und es läuft so wie gewünscht!

gute n8 der einsiedelnde

Hey basti1012, hast mein PN bei FB gelesen.

Hier möchte ich mich bei Dir auch nochmal für Deine tatkräftige Unterstützung bedanken.

Guck Dir mal im html Quelltext (ganz unten) an was ich letztendlich genutzt habe.

Sag mal, kann es sein das der IE das Array.forEach nicht kennt?

Dazu habe ich das hier gefunden: https://coderwall.com/p/kvzbpa…y-foreach-use-for-instead

Zitat

Don't use Array.forEach, use for() instead

javascript

Array.ForEach is about 95% slower than for() in for each for Arrays in JavaScript.

So, don't use:

Code

arr.forEach(function (item) {  someFn(item);
})

Use:

Code

for (var i = 0, len = arr.length; i < len; i++) {  someFn(arr[i]);
}

See this performance test online: http://jsperf.com/fast-array-foreach

Es sollte im IE alles genauso funktionieren.

b) Mach mal folgendes schieb das Bildschirmfenster ein wenig zusammen und vergrößere das Bildschirmfenster anschließend wieder.

Du siehst das das Sandwich dann immer noch sichtbar ist bei maximaler Fenstergröße.

Du schriebst dass man irgendwie mit else if arbeiten könnte wenn nur es nur eine if - Anweisung in der schleife gibt.

Jetzt ist es ja so, guck mal im meinem Quelltext.

Kann man da etwas machen?

c) Kann es sein das ich zu den 1440 px bei der javascript - Berechnung etwa 16 px dazurechnen muss das der Wert stimmt?

Ich meine dort: if(window.outerWidth<=1456){ .... usw. ...

Denn wenn ich mit media-queries arbeite, dann ist der Umbruch bei 1400 px ein anderer als die 1400 px mit dem ich im javascript arbeite,

rechne ich aber dort eben 16 px dazu dann stimmt es und ist synchron (also dort: if(window.outerWidth<=1456){ ... )

Und sag mal, später einmal, villeicht kommt noch etwas dazu oder fällt weg, kann man das alles dann irgendwie "verkürzen"?

Momentan stelle ich das CSS um, passe es an, langsam, ganz langsam wirds so wie ich es mir denke.

Gute n8

der einsiedelnde

Neee, neee Herr Drews, das war nur ein kopiertes Beispiel von diese Seite wo ich das herhabe.

Hat nichts mit meinem script zu tun.

Sehen sie es sich bitte mal mein Quelltext an , ganz unten ist das javascript.

LG der einsiedelnde

Richtig basti1012,

für Herrn Drews: In meinem ursprünglichen html Quelltext (anfangs) setze ich ersteinmal alle aria-expandet auf "true" ,

sodaß nun alle Unterpunkte geöffnet werden. das für den Fall wenn javascript ausgeschaltet ist.

Nun jetzt im normal Fall, javascript ist an, laß ich den Sandwich-Button versteckt, die Buttons für die Unterpunkte sind sichtbar.

Zusätzlich lass ich die bisher aufgeklappten Inhalt der Unterpunkte versteckt, da ja aria-expandet="false".

UND da eben habe ich mit javascript manipuliert.

Habe es bisher so:

Und es wird schon annäherns so wie ichs mir denke.

Ich pass gerade das CSS ein wenig an.

Ich denke auch darüber nach wie man das mit media queries regeln könnte oder ob man das zusätzlich einsetzt.

Ja genau, ich schau es mir grad an wie man media-queries einsetzen könnte.

Danke für das javascript, werde es mal einbauen.

EDIT: Eine Frage , das script von Ihnen ersetzt das hier:

<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>

Aber da ist noch eine Funktion, wenn eine beliebige Tastaturtaste gedrückt wird, das sich das Menü-Punkt schließt.

Verstehe ich jetzt nicht ganz.

Also das hier:

<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>

Aber da ist es ja die function dort erhalten, also:

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");
                }
            }

Aber wie lautet mein ganzes script nun.

Alles übrige (also das mit den Buttons und dem sichtbarmachen des Inhalts der Unterpunkte) werde ich mit media-queries regeln.

Gute n8

der einsiedelnde

EDIT:

Oder wollen sie mir damit sagen das Ihre 7 Zeilen nur die function init(){ .... (bei #36) ersetzt...

Dann verstehe ich es nicht, wie Ihre 7 Zeilen angewendet werden.

Liebe tatkräftige HELFER Arne Drews & basti1012

VIELEN DANK für eure tatkräftige Unterstützung

und entschuldigt bitte einem in diesen Sachen dummen KERL wie mich.

Bitte helft mir auch weiterhin, obwohl ich, ja, etwas schwierig bin.

der einsiedelnde