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 zusammenschiebt wird aus dem links angeordneten Menü irgendwann (bei)
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 illustriert.
Wie kommt das?
Als CSS habe ich bisher folgendes:
@media only screen and (min-width: 851px) and (max-width: 1499px) {
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
main {
/*margin: 0.5rem 0 0.5rem 0.3rem;*/
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(100% - 14em - 1em); /* calc(100% - 500px - 5rem); */
/*align-self: stretch;*/
}
#main-nav {
/*margin-top: 2rem;*/
margin-bottom: auto; /* 20px; */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 1em;
}
botton [aria-expanded="true"] > #main-nav {
margin-bottom: auto;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 17em;
}
}
Alles anzeigen
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
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