Grid: Navigation bei breiterem Viewport

[Rolf B]

Hallo Gerrit,

• Bisheriges nav unsichtbar machen.
• Zweites nav definieren in dem main-Bereich

Tjaaa - ich hätte Dir ja gerne einen Trick verraten, die Liste der Menüpunkte nicht zu duplizieren. Aber es scheint (noch) keinen Weg zu geben, um ein geschlossenes details-Element mit CSS Mitteln zum öffnen zu bringen. Die Frage findet sich im Netz öfter, und die Antwort zeigt jedesmal, dass die Leute unfähig sind, eine Frage zu lesen. Sie fragen zurück: "Warum setzt Du nicht das open Attribut?"

Weil das JavaScript braucht und einen Resize-Handler und nervig ist.

Ich hätte einen Trick gefunden, analog zum Checkbox-Hack, aber der müsste erstmal von Accessibility-Experten begutachtet werden. Man stelle das ul Element hinter das Details-Element, und verwende CSS, um es bei Existenz des open-Attributes am details-Element anzuzeigen.

Man kann dann eine Media-Query benutzen, um bei breitem Bildschirm das Grid-Template zu ändern, die Liste einzublenden und das Details-Element zu verstecken.

  <details aria-controls="navigation-list">
    <summary>☰</summary>
  </details>
  <ul id="navigation-list">
    <li><a href="/">Startseite (Home)></a></li>
    <li><a href="#">Seite 1></a>
    <li><a href="#">Seite 2></a>
    <li><a href="#">Seite 3></a>
  </ul>

nav ul { display: none; }
nav details[open] + ul { display: block; }

@media (min-width: 40em) {
  main { border-color: blue;}

  body {
    grid-template: "header header header" auto
                   "nav main rest" auto
                   / 10em 1fr 20%;
  }
  nav details {
    display: none;
  }
  nav ul {
    display: block;
    border:none;
  }

Aber keine Ahnung was der IE dazu sagt, oder ein Screenreader.

Rolf