Semantisch saubere Navigationsstruktur 2.0

[Anne Kaffeekanne]

Hallo,

ich wiederum verstehe deine Frage nicht ganz, habe mein Anliegen eigentlich recht unmissverständlich dargelegt:

Nun erscheint mir auch diese Umsetzung ein wenig hacky und wird auch nicht von allen gängigen Browsern sauber implementiert (Edge, etc. positionieren den button eher mittig als - wie eigentlich gewünscht - am rechten Rand).

Im Endeffekt geht es um eine Möglichkeit, die Elemente genau positionieren zu können, ohne dabei [auch unter Berücksichtigung der Aspekte der Accessibility] semantische Regeln zu brechen, was die Textfluss-Lösung [text-align: justify] nicht zuzulassen scheint (bitte mich eines Besseren belehren, sollte ich da etwas übersehen haben!).

Fasse ich das Menü zusammen nach Schema:

<h1>ÜBERSCHRIFT</h1>
<nav>
  <button>Ich klappe das Menü auf und zu!</button>
  <ul>
    <li>Menüpunkt</li>
    <li>Menüpunkt</li>
  </ul>
</nav>

...und will ich nun, dass sich <h1> und <button> eine "Zeile" teilen, während die klappbaren Menüpunkte die gesamte Breite des Dokuments einnehmen, 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), bzw. könnte ich das button-Element mit position: absolute komplett aus dem Fluss nehmen - übersehe ich vielleicht eine offensichtliche dritte Möglichkeit?

Funktionieren würde es nach Schema:

<h1>ÜBERSCHRIFT</h1>
<button>Ich klappe das Menü auf und zu!</button>
<nav> 
  <ul>
    <li>Menüpunkt</li>
    <li>Menüpunkt</li>
  </ul>
</nav>

<!-- Drei separate Einheiten: <h1>, <button>, <nav> -->

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

Danke für eure Ideen! LG.