window.matchMedia('(min-width: 40em)').matches

[beatovich]

hallo

Ich experimentiere gerade mit

window.matchMedia('(min-width: 40em)').matches && ...

Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.

Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege. Die obige Angabe ist etwas adhoc.

Im Effekt sollen Anwender meiner Klapper-Logic eine Horizontalnavigation zu einer Vertikalen Listennavigation umbauen können falls die Klasse mobileTrue vorliegt.

Wo/wie legt ihr selber Knackpunkte fest

Wie fange ich am besten Browser ab, die window.matchMedia nicht kennen?

if(window.matchMedia){
   ...
}

so?

[Gunnar Bittersmann]

@@beatovich

Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.

Woher kommt dieser Wunsch, die Navigation auf Mobilgeräten unbedingt hinter einem Hamburger-Icon verstecken zu müssen?

Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege.

Der hängt vom Inhalt ab.

Mit JavaScript hast du die Möglichkeit, die vom Menü benötigte Breite auszulesen und darauf zu reagieren, wenn diese die Viewport-Breite überschreitet.

LLAP 🖖

[beatovich]

hallo

@@beatovich

Ziel ist ein Hamburger-Popup-Navigation nur für mobiles.

Woher kommt dieser Wunsch, die Navigation auf Mobilgeräten unbedingt hinter einem Hamburger-Icon verstecken zu müssen?

Frag das jene die das anwenden, und es sind viele. Tatsächlich möchte ich im Klapperwerk Wünschen nachkommen.

Ich frage mich jetzt, wie ich den guten Umschaltpunkt festlege.

Der hängt vom Inhalt ab.

Das denke ich nicht. Hier gehts primär um das Setzen einer Klasse mobileTrue, auf die der CSS Autor dann seinerseits reagieren kann.

Mit JavaScript hast du die Möglichkeit, die vom Menü benötigte Breite auszulesen und darauf zu reagieren, wenn diese die Viewport-Breite überschreitet.

Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle

[Gunnar Bittersmann]

@@beatovich

Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle

offsetWidth sollte das richtige sein. Beispiel

LLAP 🖖

[beatovich]

hallo

Ich kann den Platzbedarf von flexiblem Inhalt nicht auswerten. Ich erhalte durchgehend 0/undefined bei clientWidth oder getComputedStyle

offsetWidth sollte das richtige sein. Beispiel

Das Container-Element ist in meinem Fall ein Element mit display:flex, oder was immer der Anwender definiert. Ich kann mich nicht auf solch klare Fälle wie in deinem Beispiel verlassen, denn deines bedingt ja auch zuerst, dass du jegliches Umbrechen verhinderst.

[JürgenB]

Hallo Beat,

warum machst du die Art der Navigation vom Gerätetyp abhängig. Ich würde da nur prüfen, ob die Navigation passt. Wenn du den Platzbedarfs kennst, verwende ihn, sonst musst du, wie Gunnar schon schrieb, den Platzbedarfs erst ermitteln.

Die Unterscheidung zwischen Mobil- und anderem Gerät ist nicht nötig. Z.B. bleibt meine Navigation auf Tablets breit, kann aber auf dem Laptop bei kleinen Viewport eingeklappt sein.

Da ich ein Freund von fixen Menüs bin, prüfe ich auch noch die Viewporthöhe.

Gruß
Jürgen

[beatovich]

hallo

warum machst du die Art der Navigation vom Gerätetyp abhängig. Ich würde da nur prüfen, ob die Navigation passt. Wenn du den Platzbedarfs kennst, verwende ihn, sonst musst du, wie Gunnar schon schrieb, den Platzbedarfs erst ermitteln.

Wie ich schon schrieb erhalte ich keine sinnvolle Angabe, weil tadaa, die enthaltenen Sachen schon flexibel sind.

Die Unterscheidung zwischen Mobil- und anderem Gerät ist nicht nötig. Z.B. bleibt meine Navigation auf Tablets breit, kann aber auf dem Laptop bei kleinen Viewport eingeklappt sein.

Es handelt sich nicht um eine Geräte-Unterscheidung sondern um eine Viewport-Unterscheidung.

Habe die entsprechende Klasse auch schon zu ifSmallScreen umgeschreiben

Es macht nun mal Sinn auf kleinen Bildschirmen bestimmte Dinge erst mal eingeklappt zu präsentieren. Da es diese Mechanismus auf grossen Bildschrirmen aber nicht braucht, muss automatisch eine JS Lösung her.

Was der Inhalt der Box ist, ist erst mal egal. Es kann auch eine Navigation sein.

Die Frage ist deshalb, wenn wir ziwschen kleinen und grossen Viewports unterscheiden sollen, was ist ein geeigneter Splitpunkt.

Ich habe hier mal eine em Angabe gewählt.

Ich werde später eine aktuelle Version der Klapper-Logik hochladen. Da wird's dann auch einen Usecase geben.

[JürgenB]

Hallo Beat,

ich mache die Unterscheidung Groß/Klein vom Inhalt abhängig. Bei einer alten Version meiner Navigation habe ich sie per JS kurz aufgeklappt, vermessen, den Platzbedarf mit der Viewportgröße verglichen und dann entschieden, wie ich sie behandle.

Gruß
Jürgen

[beatovich]

hallo

Ich habe mal meine Klapperlogic neu hochgeladen.

https://beat-stoecklin.ch/klapperlogic.html

Safari für iOS wird wohl nicht auf matchMedia ansprechen.

Das CSS ist ziemlich stereotyp gehalten. Es geht ja darum, erst mal mit einem Minimum an Aufwand die Funktionalität zu demonstrieren.

Den Breakpoint wird man dann individuell einstellen können, je nach Bedarf.

[Matthias Apsel]

Hallo beatovich,

https://beat-stoecklin.ch/klapperlogic.html

Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.

Bis demnächst
Matthias

[beatovich]

hallo

https://beat-stoecklin.ch/klapperlogic.html

Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.

Ich nehme an, du beziehst dich auf die allgemeine Syntax.

Ja das ist schwierig und ich lasse mich da gerne beraten, wie man Code-Beispiele verständlicher strukturiert.

[Matthias Apsel]

Hallo beatovich,

https://beat-stoecklin.ch/klapperlogic.html

Kommentare innerhalb von Tags sind nicht erlaubt. Aber ich wüsste auch nicht, wie man das sonst darstellen könnte.

Ich nehme an, du beziehst dich auf die allgemeine Syntax.

Genau.

Ja das ist schwierig und ich lasse mich da gerne beraten, wie man Code-Beispiele verständlicher strukturiert.

Ja, das ist schwierig.

Bis demnächst
Matthias