SLIDE-Menü verlässt kurzzeitig sein Gridelement

[einsiedler]

25-03-29 Mein Fragenkatalog

A) GRID

Ich möchte fragen wie es sich RICHTIG verhält:

body {
    display: grid;
    grid-template-areas:
        "content-header      content-header     "
        "global-navigations  global-navigations "
        "main                aside-banner   	"
        "footer              footer         	";
    grid-template-columns: 1fr auto;
    grid-auto-rows: max-content;
    margin-inline: auto;
    max-width: 85%;
	margin-top: 0.7rem;
}

Nun, wie ich es nenne, "pinne" ich die entsprechenden aeras nun an:

#content-header {
    grid-area: content-header;
}
##


## Hier pinne ich meine "Seitenübersicht" an
  <details id="content-nav-box" class="nav-box" tabindex="-1">
	<summary>Inhalts-Übersicht</summary>
  </details>

#content-nav-box {
    grid-area: global-navigations;
    [ ... ]
}
##



##  Hier pinne ich mein Hauptmenü an
##
#global-nav {
    grid-area: aside-banner;
    grid-row-start: global-navigations-start;
    [ ... ]
}
##


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

#global-navigations {
    grid-area: global-navigations;
    [ ... ]
}
##  Ist es NÖTIG dies zusätzlich zu definieren?



##
##  Mein  scroll-to-top-Button

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

[ ... ]

a) Ist es NÖTIG mein #site-banner & #navigations ZUSÄTZLICH so zu definieren oder ist es überflussig?

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

c) Kann man es so machen das jedes Element "angepinnt" wird?

d) Wenn ich nun mein Hauptmenü #global-nav {} NICHT der aera aside-banner anknüpfen möchte sondern an global-navigations anknüpfen möchte

DANN nimmt mein #global-nav {} logischerweise die GANZE Zeile von global-navigations an

DAS MÖCHTE ich NICHT

Nun meine Frage d)-a)

WIE kann man es erreichern das mein #global-nav {} Bereich meinetwegen 12rem hat und zudem am rechten Rand angeordnet wird?

Dieser Bereich also ein SEPERATER EIGENSTÄNDIGER Bereich wird?

Was bei mir bisher NICHT geklappt hat ist folgendes:

body {
    display: grid;
    grid-template-areas:
        "content-header      content-header     "
        "global-navigations  global-navigations "
        "main                aside-banner   	"
        "footer              footer         	"
	/ [global-nav-start] 12em [global-nav-end];
    	margin-inline: auto;
    	grid-template-columns: 1fr auto;
    	grid-auto-rows: max-content;
    	max-width: 85%;
	margin-top: 0.7rem;
}


#global-navigations {
	grid-area: global-navigations;
	grid-column-end: global-nav;
}


#global-nav {
	grid-area: global-navigations / global-nav;
	grid-row-start: global-navigations-start;
    	direction: rtl;
    	z-index:1000;
	position:  relative;
	height: fit-content;
	text-align: center;
}

Wie kann ich das nun machen?

---

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?

Mal dumm nachgefragt.

---

f) TAB-SKIP

Wäre es NOTWENDIG beispielsweise die Seitenüberschrift oder den SKIP-to-TOP Button mit den TAB anzusteuern?

Ist das sinnvoll und notwendig?

Freue mich auf eure Antworten

Gruß der einsiedelnde