SLIDE-Menü verlässt kurzzeitig sein Gridelement

[Gunnar Bittersmann]

@@einsiedler

body {
    max-width: 85%;
}

Warum verschenkst du 15% der Viewportbreite?

## Hier pinne ich meine "Seitenübersicht" an

Das ## in CSS keinen Kommentar einleitet, weißt du?

#global-nav {
    grid-area: aside-banner;
    grid-row-start: global-navigations-start;
}

Wozu das denn? Du hast mit grid-template-areas benannte Bereiche festgelegt. Mit grid-area ordnest zu Elementen Bereiche zu. Warum hantierst du da noch mit grid-row-start?

#aside-banner {
    grid-area: aside-banner;
    grid-row-start: global-navigations-start;
}

Dito. Und das Element mit der ID „aside-banner“ soll das Element mit der ID „global-nav“ überdecken? Du hast sie ja in dieselbe Grid-Zelle gepackt.

Hast du überhaupt ein Element mit der ID „aside-banner“?

#global-navigations {
    grid-area: global-navigations;
}

Ein Element „global-nav“ zu nennen und ein anderes „global-navigations“, ist wohl auch sehr wenig klug.

#scroll-button-area {
    grid-area: aside-banner;
    grid-row-start: global-navigations-start;
    grid-template-rows: max-content;
}

?? Du legst zuerst grid-area fest und willst das teilweise überschreiben?

b) muss man überall display:grid; dazuschreiben?

?? display: grid steht an den Elementen, die ein Grid aufspannen.

Die mir unverständlichen Fragen überspringe ich mal.

e) details und summary Menü

Wegen den screenreader bedenken:

Wenn man es trotzalledem so machen möchte:

Was wäre wenn man ZUSÄTZLICH allem ein nötiges ARIA-Elemente mitgibt (für die screenreader)

Also bei details & summary, wenn details geöffnet ist, nun zusätzlich ein aria-expandet="true" mitgibt.

WÜRDE DAS das Problem eventuell mindern und so funktionieren?

Nein. details ist schon interaktiv; Screenreader sollten damit klarkommen und das richtig ansagen.

Das ändert nichts daran, dass eine Navigation kein Detail ist, also nicht in ein details-Element gehört.

Jolan tru