Semantisch saubere Navigationsstruktur 2.0

[Gunnar Bittersmann]

@@Anne Kaffeekanne

...und will ich nun, dass sich <h1> und <button> eine "Zeile" teilen, während die klappbaren Menüpunkte die gesamte Breite des Dokuments einnehmen,

Deshalb ist ul auf display: inline-flex; width: 100% gesetzt, damit h1, button und ul Inline-Elemente sind, wobei ul eine ganze Zeile beansprucht und deshalb h1 und button links bzw. rechts ausgerichtet sind.

Damit das auch so bleibt, wird ul beim Ausblenden nicht auf display: none gesetzt, sondern auf visibility: hidden und die li auf display: none. (Ich denke, das war der Plan; ich hab das aber jetzt nur überflogen.)

so kann ich das nur nach der von Gunnar erdachten Methode mit text-align: justify machen (die leider nicht von allen Browsern visuell sauber umgesetzt wird)

?? In welchen denn nicht?

bzw. könnte ich das button-Element mit position: absolute komplett aus dem Fluss nehmen

Wäre denkbar, wenn die Beschriftung nicht „Ich klappe das Menü auf und zu!“ ist 😉, sondern „Menü“ oder gar nur ein Icon (mit Alternativtext).

(Erwähnte ich schon, dass ich das Hamburger Icon für Menüs für ungeeignet halte?)

In dem Fall kannst du die Breite des Buttons ungefähr abschätzen und der Überschrift entsprechendes padding geben, damit der Button die Überschrift nicht überdeckt.

übersehe ich vielleicht eine offensichtliche dritte Möglichkeit?

Grid – wenn Browser denn display: contents vernünftig umsetzen würden.

...wäre aber eben semantisch nicht mehr sauber, da button ja eigentlich Teil der Navigation ist...

Richtig, der button muss sich im nav-Element befinden, damit er von blinden Screenreader-Nutzern beim Anwählen der Navigation auch gefunden wird.

LLAP 🖖