Menüführung bei unterschiedlichen Bildschirmbreiten

  • Hallo liebe Forumer,

    ich stelle auch hier mal meine Frage, weil ich in einem anderen Forum nun seid langer Zeit keine Antwort mehr erhalten habe und ich möchte nun mal vorran kommen.

    Es geht um die Menüführung bei unterschiedlichen Bildschirmbreiten.

    Wenn man das Bildschirmfenster bei meiner Beispielseite DEMO-Beispiel zusammenschiebt wird aus dem links angeordneten Menü irgendwann (bei)

    Code
    1. @media only screen and (min-width: 851px) and (max-width: 1499px) {}

    ein Botton das man aufklappen kann.

    Klappt man das Menü auf, folgt der Haken: Das Menü nimmt NICHT die Gesamtbreite des ursprünlichem Menü an (wie bei einem breiten Bildschirmfenster / zumindest proportional!!).

    Ich habe das mal anhand von Screens Illu mit screens illustriert.


    Wie kommt das?


    Als CSS habe ich bisher folgendes:



    Ich habe dem #main-nav eine flex-basis von 17em mitgegeben, also müsste er doch (zumindest proportional bei schmalerem Bildschirmfenster)

    das Menü breiter darstellen?


    Wie schon gesagt hängt die Breite mit dem

    Code
    1. botton [aria-expanded="true"]

    zusammen / ist abhängig! (ich meine villeicht stimmt da irgendwas nicht!)


    Wer kann mir da helfen bitte!

    Verdorri nochmal wo liegt hier mein Denk/Logik-Fehler?


    Gruß der einsiedelnde

  • Da sehe ich in den Entwicklerwerkzeugen keine flex-basis von 17em sondern von 1em:

    Code
    1. @media only screen and (max-width: 1499px) and (min-width: 851px)
    2. #main-nav {
    3. /* margin-top: 2rem; */
    4. margin-bottom: auto;
    5. flex-grow: 0;
    6. flex-shrink: 0;
    7. flex-basis: 1em;
    8. }

    (sturm-main-style.css Zeile 360)

    Ändere ich es auf 17em, wird es wie von dir gewünscht dargestellt. Schreibfehler?

  • Nee @Sempervivum, das ist kein Schreibfehler.

    Wie soll ich es beschreiben, es sind zwei Zustände. Wenn also der Sandwich-Botton ( also [aria-expanded="false"] ) dargestellt ist soll die

    Breite des Menüs eben so breit wie der Botton sein (Das eigentliche Menü wird ja nun auch nicht dargestellt ist ja noch hidden),

    Und wenn also [aria-expanded="true"] ist beim KLICK des Bottons, soll also das Menü in seiner Breite, also 17em nach rechts

    (als auch nach unten / klar) ausklappen.

    Doch das macht es nicht.

    Irgendwo ist da ein Logik-Fehler, aber wo?

    Ich finde ihn nicht!

  • Verstehe. Ich wollte zunächst vorschlagen, mit CSS abhängig von der Eigenschaft aria-expanded das flex-basis zu ändern, aber leider ist ja das nav-Element ein Elternelement und mit CSS nicht zugänglich.

    Mögliche Lösungen:

    • Dem ul eine Breite von 17em geben und dem nav ein flex-basis:auto, dann sollte das nav die Breite des ul übernehmen.
    • oder mit dem Javascript (dort bin ich nicht eingestiegen) auch dem nav im aufgeklappten Zustand eine geeignete Klasse geben, so dass Du abhängig davon das flex-basis umschalten kannst.

    Ersteres habe ich in den Entwicklerwerkzeugen versucht und funktioniert.

  • Verstehe ich es richtig, betrifft es also auch die id (vom <nav>) also: <nav id="main-nav"> das das ganze ein eltern-Element ist?

    Und wenn ich zusätzlich dem ganzen eine class gebe <nav id="main-nav" class="expand">

    ändert sich dann etwas?

    Das geht in Richtung 2. Lösung

    Aber wie würde ich das anstellen?

  • Scheint richtig, denn du denkst, für den Fall, wenn Java-script ausgeschaltet wäre, hätte ja #main-nav überhaupt keine Breitenangabe.

    Für den Fall, wenn also scripte ausgeschaltet sind, muss ich mir noch etwas einfallen lassen, aber das kommt als nächstes.

    Also beim breitem Bildschirmfenster ergibt es sich ganz gut, als auch bei schmalerem Bildschirmfenster ( also bis 850 px ) ,

    das sich alles nach unten aufklappt. Nur für den "mittleren Zustand" ( @media only screen and (min-width: 851px) and (max-width: 1499px) {} )

    muß ich mir etwas überlegen.

  • Wenn ich zusätzlich bei dem ul die Breite auf 17em setze, stimmt schon mal die Breite. Dann hat man noch einen unerwünschten Umbruch drin. Man müsste die Berechnung der Breite für den Hauptcontainer anpassen, aber ich empfehle stattdessen, den Header dort heraus zu nehmen und mit flex-direction zwischen horizontaler und vertikaler Anordnung umzuschalten. Ich liebe diese Fummelei mit calc nicht und vermeide sie, wenn es irgend geht. Meistens kann man das Layout so gestalten, dass die richtigen Breiten automatisch durch Flex eingestellt werden.

  • Also Du meinst: Das dieses Konstrukt "wie Perlen an einem Strang" (also hintereinander) (also: header = 100% --> flex-wrap --> <nav> = 7em + <main> den errechneten Rest , das das für mein Konzept nicht das ware ist.

    Besser ist es den <header> extern für sich, und um die <nav> + <main> ein div legen, umschliessend. Da dann jenachdem

    fex-direction : row   oder column setzen. Das das besser wäre.

    Ja, das habe ich mir auch schon gedacht, das wäre wie bei m einer alten website.

    Mal gucken, ich entwerf da gerade mal etwas in dieser Richtung.

  • Denkst Du, man könnte das hier: Technikbeispiel für Menüs mit :target (ist übrigens nach einer Nachfrage von mir entstanden

    und hier angewendet: Anwendungsbeispiel


    das man DAS so umbauen könnte das es mit meinem botton zum nav-öffnen funktioniert?

    ABER: Den botton zum umzwitschen das der sich ausserhalb des Schiebe-Contents befindet, quasi fix ist,

    also nicht so wie in dem Anwendungsbeispiel.

    Also wenn man entsprechend position: absolute und position relative setzt. Könnte das funktionieren?


    Gute n8


    der einsiedelnde

  • Nee, nee, hast es nicht verstanden, ich meinte das man den "einschiebeeffekt" erhält aber/und das ganze mit meinem botton, den ich schon habe.

    Das der botton links am Rand sitzt (wie gehabt) und bei Betätigung das das "Schiebefenster" aufgeht und halt zurück.

  • Kann man schon machen, ist aber offenbar nicht das, was einsiedler möchte.


    Den Schiebeeffekt kannst Du erreichen, indem Du das ul mit der Nav nicht einfach ein- und ausschaltest mit display:none/block sondern seine Position in horizontaler Richtung, z. B. mit margin-left veränderst. (Ich empfehle dieses und nicht position-left weil ich erwarte, dass sich bei margin der umgebende Container, das nav, mit ausdehnt.)

    Damit das Ganze dann auch animiert abläuft und nicht ruckartig, musst Du transition verwenden:

    https://wiki.selfhtml.org/wiki…ften/Animation/transition

  • Ich habe mal etwas "umgebaut", ist aber noch nicht das "ware" (siehe im IE , warum auch immer!)

    wer kann mir bitte ein anschauliches beispiel geben / basteln von dem ich dinge übertragen kann, so kann ich besser lernen!


    bitte um hilfe!


    der einsiedelnde

  • Hab mich von Deinem Code "inspirieren" lassen, denn ich weiß nicht, hab so im Hinterkopf wie es sich mit

    <input / "checkboxen"> und <label> bei Mobilen Geräten verhält.

    Nein, ich bleib bei dem was ich habe, mit dem botton, was ja alles funktioniert.

    Hab allerdings eine Idee von Dir kopiert und angewendet und es funktionier bis auf zwei Fehler ganz gut.

    Siehe: Demo - Beipiel ( Bitte das Bildschirmfenster zusammenschieben um die Wirkung zu sehen! )

    Fehler 1: Durch die Rechnerei, die noch geblieben ist nimmt das <main> nicht die gesamte Breite ein.

    Fehler 2: wenn man den botton drückt , also [aria-expanded="true"] ist, geht das <main> rechts über den Rand hinaus / hinweg.

    Aber ich wollte ähnlich wie bei dem :target beispiel durch position: relative; und position: absolute; Setzung soetwas verhindern.

    Das meinte ich im vorhergehenden Post.


    Irgendeine helfende Idee dazu?


    Nun aber gute n8


    der einsiedelnde