Guten Morgen, [EDIT] Sorry, hatte fälschlicherweise nicht geantwortet, sondern in den Beitrag editiert. Matthias Scharwies [/EDIT] >Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so? [Codepen.io Verlinkung](https://codepen.io/Seb-B-/full/yyLvpdx) >Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem **Button** entsorechend content: " ☰"; & content: " ✖"; mitgibt. >Geht das? Ja, wobei ein SVG (auch als Hintergrundbild) eben eleganter wäre. > Wäre das auch innerhalb eines GRID-Feldes anwendbar? Was spräche dagegen? > Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch? Ich habe tausende Beispiele im Netz gefunden die mit Checkboxen arbeiten, das ist a) überaltet und b) (wichtiger!) **NICHT barrierefrei**, I know, trotzdem wird es noch gemacht. Ein Artikel von 2010 0der 2020 wird nicht automatisch gelöscht. Das ist eben die Kunst, sich im Netz das Gute rauszusuchen. > **HTML popover** ist noch ziemlich neu, ich finde schade das beim Firefox das Menü nicht auch zurückslidet wie bei den anderen Browsern, da ist es irgendwie apprupter. > > Da fällt mir ein, müssen da irgendwelche Workarrounds gemacht werden für Browser die das NICHT können? Wenn ja, was? * [**Infobox/Tooltips_mit_Popover**](https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover) Da steht alles drin (Caniuse 89,9%, Polyfill, etc)

Guten Morgen, >Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so? [Codepen.io Verlinkung](https://codepen.io/Seb-B-/full/yyLvpdx) >Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem **Button** entsorechend content: " ☰"; & content: " ✖"; mitgibt. >Geht das? Ja, wobei ein SVG (auch als Hintergrundbild) eben eleganter wäre. > Wäre das auch innerhalb eines GRID-Feldes anwendbar? Was spräche dagegen? > Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch? Ich habe tausende Beispiele im Netz gefunden die mit Checkboxen arbeiten, das ist a) überaltet und b) (wichtiger!) **NICHT barrierefrei**, I know, trotzdem wird es noch gemacht. Ein Artikel von 2010 0der 2020 wird nicht automatisch gelöscht. Das ist eben die Kunst, sich im Netz das Gute rauszusuchen. > **HTML popover** ist noch ziemlich neu, ich finde schade das beim Firefox das Menü nicht auch zurückslidet wie bei den anderen Browsern, da ist es irgendwie apprupter. > > Da fällt mir ein, müssen da irgendwelche Workarrounds gemacht werden für Browser die das NICHT können? Wenn ja, was? * [**Infobox/Tooltips_mit_Popover**](https://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover) Da steht alles drin (Caniuse 89,9%, Polyfill, etc)

Hallo Gunnar, entschuldige Bitte meine sehr zeitverzögerte Antwort. Momentan bin ich dabei die Seite neu zu strukturieren, ich habe es selbst gemerkt, ja Du hast Recht, das Markup muss sich gehörig ändern. Das merkte ich beim einsetzen von tabindex="-1" und dem darauf folgenden benutzen von TAB. Es muss **sofort** eine blaue Umrandung angezeigt werden, richtig? Da ist wohl auch folgendes nicht richtig: ~~~ html <nav id="tabskip" aria-label="Schnellnavigation"> <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> </nav> ~~~ Also ich meine, das man erst "hinspringt" und dann die blaue Umrandung angezeigt wird, beim zweiten TAB betätigen. Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so? [Codepen.io Verlinkung](https://codepen.io/Seb-B-/full/yyLvpdx) Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem **Button** entsorechend content: " ☰"; & content: " ✖"; mitgibt. Geht das? Wäre das auch innerhalb eines GRID-Feldes anwendbar? Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch? Ich habe tausende Beispiele im Netz gefunden die mit Checkboxen arbeiten, das ist a) überaltet und b) (wichtiger!) **NICHT barrierefrei**, I know, trotzdem wird es noch gemacht. **HTML popover** ist noch ziemlich neu, ich finde schade das beim Firefox das Menü nicht auch zurückslidet wie bei den anderen Browsern, da ist es irgendwie apprupter. Da fällt mir ein, müssen da irgendwelche Workarrounds gemacht werden für Browser die das NICHT können? Wenn ja, was? Gute N8 T.

Hallo Gunnar, entschuldige Bitte meine sehr zeitverzögerte Antwort. Momentan bin ich dabei die Seite neu zu strukturieren, ich habe es selbst gemerkt, ja Du hast Recht, das Markup muss sich gehörig ändern. Das merkte ich beim einsetzen von tabindex="-1" und dem darauf folgenden benutzen von TAB. Es muss **sofort** eine blaue Umrandung angezeigt werden, richtig? Da ist wohl auch folgendes nicht richtig: ~~~ html <nav id="tabskip" aria-label="Schnellnavigation"> <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> </nav> ~~~ Also ich meine, das man erst "hinspringt" und dann die blaue Umrandung angezeigt wird, beim zweiten TAB. Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so? [Codepen.io Verlinkung](https://codepen.io/Seb-B-/full/yyLvpdx) Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem **Button** entsorechend content: " ☰"; & content: " ✖"; mitgibt. Geht das? Wäre das auch innerhalb eines GRID-Feldes anwendbar? Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch? Ich habe tausende Beispiele im Netz gefunden die mit Checkboxen arbeiten, das ist a) überaltet und b) (wichtiger!) **NICHT barrierefrei**, I know, trotzdem wird es noch gemacht. **HTML popover** ist noch ziemlich neu, ich finde schade das beim Firefox das Menü nicht auch zurückslidet wie bei den anderen Browsern, da ist es irgendwie apprupter. Da fällt mir ein, müssen da irgendwelche Workarrounds gemacht werden für Browser die das NICHT können? Wenn ja, was? Gute N8 T.

Hallo Gunnar, entschuldige Bitte meine sehr zeitverzögerte Antwort. Momentan bin ich dabei die Seite neu zu strukturieren, ich habe es selbst gemerkt, ja Du hast Recht, das Markup muss sich gehörig ändern. Das merkte ich beim einsetzen von tabindex="-1" und dem darauf folgenden benutzen von TAB. Es muss **sofort** eine blaue Umrandung angezeigt werden, richtig? Da ist wohl auch folgendes nicht richtig: ~~~ html <nav id="tabskip" aria-label="Schnellnavigation"> <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> </nav> ~~~ Also ich meine, das man erst "hinspringt" und dann die blaue Umrandung angezeigt wird, beim zweiten TAB. Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so? [Codepen.io Verlinkung](https://codepen.io/Seb-B-/full/yyLvpdx) Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem **Button** entsorechend content: " ☰"; & content: " ✖"; mitgibt. Geht das? Wäre das auch innerhalb eines GRID-Feldes anwendbar? Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch? Ich habe tausende Beispiele im Netz gefunden die mit Checkboxen arbeiten, das ist a) überaltet und b) (wichtiger!) **NICHT barrierefrei**, I know, trotzdem wird es noch gemacht. **HTML popover** ist noch ziemlich neu, ich finde schade das beim Firefox das Menü nicht auch zurückslidet wie bei den abderen Browsern, da ist es irgendwie apprupter. Da fällt mir ein, müssen da irgendwelche Workarrounds gemacht werden für Browser die das NICHT können? Wenn ja, was? Gute N8 T.

Hallo Gunnar, entschuldige Bitte meine sehr zeitverzögerte Antwort. Momentan bin ich dabei die Seite neu zu strukturieren, ich habe es selbst gemerkt, ja Du hast Recht, das Markup muss sich gehörig ändern. Das merkte ich beim einsetzen von tabindex="-1" und dem darauf folgenden benutzen von TAB. Es muss **sofort** eine blaue Umrandung angezeigt werden, richtig? Da ist wohl auch folgendes nicht richtig: ~~~ html <nav id="tabskip" aria-label="Schnellnavigation"> <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> </nav> ~~~ Also ich meine, das man erst "hinspringt" und dann die blaue Umrandung angezeigt wird, beim zweiten TAB. Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so? [Codepen.io Verlinkung](https://codepen.io/Seb-B-/full/yyLvpdx) Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem **Button** entsorechend content: " ☰"; & content: " ✖"; mitgibt. Geht das? Wäre das auch innerhalb eines GRID-Feldes möglich? Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch? Ich habe tausende Beispiele im Netz gefunden die mit Checkboxen arbeiten, das ist a) überaltet und b) (wichtiger!) **NICHT barrierefrei**, I know, trotzdem wird es noch gemacht. **HTML popover** ist noch ziemlich neu, ich finde schade das beim Firefox das Menü nicht auch zurückslidet wie bei den abderen Browsern, da ist es irgendwie apprupter. Da fällt mir ein, müssen da irgendwelche Workarrounds gemacht werden für Browser die das NICHT können? Wenn ja, was? Gute N8 T.

Hallo Gunnar, entschuldige Bitte meine sehr zeitverzögerte Antwort. Momentan bin ich dabei die Seite neu zu strukturieren, ich habe es selbst gemerkt, ja Du hast Recht, das Markup muss sich gehörig ändern. Das merkte ich beim einsetzen von tabindex="-1" und dem darauf folgenden benutzen von TAB. Es muss **sofort** eine blaue Umrandung angezeigt werden, richtig? Da ist wohl auch folgendes nicht richtig: ~~~ html <nav id="tabskip" aria-label="Schnellnavigation"> <a href="#content-nav-box">Zur Inhaltsübersicht springen (Enter drücken)</a> <a href="#global-nav">Zur Hauptnavigation springen (Enter drücken)</a> <a href="#main">Zum Hauptinhalt springen (Enter drücken)</a> <a href="#rechtliches-footer">Zum Footer springen (Enter drücken)</a> <a href="#scroll-to-top">Zum Skip-Button springen (Enter drücken)</a> </nav> ~~~ Also ich meine, das man erst "hinspringt" und dann die blaue Umrandung angezeigt wird, beim zweiten TAB. Jetzt aber zu dem eigentlichen Menü, meinst Du es in etwa so? [Codepen.io Verlinkung](https://codepen.io/Seb-B-/full/yyLvpdx) Nur frage ich mich ob es auch ohne SVG´s geht, wenn man also dem **Button** entsorechend content: " ☰"; & content: " ✖"; mitgibt. Geht das? Wäre das auch innerhalb eines GRID-Feldes möglich? Auch fände ich es besser wenn der Hamburger NICHT vom einschwebendeb Menü überdeckt wird sondern er Teil des Einschwebemenüs ist, eben mit der Breite des Hamburgers (der schon von-anfang-an hervorguckt). Geht das auch? Gute N8 T.