SLIDE-Menü verlässt kurzzeitig sein Gridelement

[einsiedler]

@@einsiedler

body {
    max-width: 85%;
}

Warum verschenkst du 15% der Viewportbreite?

Möchte es Blog-ähnlich haben und ein wenig Leerraum ist doch immer schön, oder?

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

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

Verdorri noch eins ja , sollte NUR für euch Leser eine Kommentierung von mir sein die zu meinen Fragenkatalog gehören...

#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?

Schlicht und einfach: Möchte das das dieser Bereich WEITER OBEN anfängt obwohl es zum aside-banner gehört.

Der aside Banner beinhaltet: Den SEITENNamen, den Scroll to top Button

#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“?

JUP

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;
}

ODER meinst du damit das :

#aside-banner {
    grid-area: aside-banner;
    [ ... ]
}

das DIESES fehlt und angeführt werden muss...

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

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

DOCH, sind zwei unterschiedliche Dinge, derjenige der sich mein Lifebeispiel NIEMALS angeguckt hat, der weiß es auch NICHT.

„global-nav“ == meine HAUPTNAVIGATION

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

Die mir unverständlichen Fragen überspringe ich mal.

DIE ist mir jedoch am wichtigsten das ich weiterkomme, verdorrie:

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;
}

WAS PASSIERT DABEI WOHL, oder auch NICHT! Darum frag ich auch hier nach.

Am äußersten rechten Rand möchte ich in diesem Bereich von global-navigations meine Hauptnavigation stehen haben also mein Hamburger Button.

Bei dem was ich oben angeführt habe zerschießt ALLES KOMPLETT.

WARUM?

Tipp: NIEMALS mein Lifebeispiel angucken

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.

GUT, bestätigt mich doch die Java-script Variante von dem hier:

Navigation/Flyout-Menü : https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC#cite_note-6 zu verwenden. O.K.

Meine neue LIFE-Version: Stand 26-03

LIFE Beispiel bei Bplaced

Jolan tru

JUP, ja die Romulaner.