CSS/Tutorials/Flexbox Dropdown-Menü

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Artikel lernen Sie, wie Sie mit dem Flexbox-Layout nicht nur das Seitenlayout, sondern auch ein Dropdown-Menü flexibel und responsiv gestalten können.

ToDo (weitere ToDos)

Artikel muss fertiggestellt werden. (Evtl. Alternative mit Grid Layout) Matthias Scharwies (Diskussion)

HTML-Grundgerüst[Bearbeiten]

Beispiel: Flexbox-Layout ansehen …
<nav>
  <ul>
    <li><a href="/">Startseite</a></li>
    <li>
      <a href="#">Geschichte</a>
      <ul>
        <li><a href="#">Vorläufer</a></li>
        <li><a href="#">Go West! - Flucht aus der Dust Bowl</a></li>
        <li><a href="#">Niedergang (Interstate 40)</a></li>
        <li><a href="#">Renaissance</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Verlauf</a>
      <ul>
        <li><a href="#">Illinois, Missouri und Kansas</a></li>
        <li><a href="#">Oklahoma, Texas und New Mexico</a></li>
        <li><a href="#">Arizona und Kalifornien</a></li>
        <li><a href="#">Veränderungen im Verlauf</a></li>
      </ul>
    </li>
    <li><a href="#">Impressum</a></li>
  </ul>
</nav>
Die Navigation besteht wie bei den konventionelleren Varianten aus einem nav-Element mit einer unsortierten Liste. Innerhalb der Listenelemente befinden sich die Verweise auf weitere Seiten und, falls es ein Untermenü geben soll, weitere unsortierte Listen.

CSS[Bearbeiten]

Flexbox[Bearbeiten]

Beispiel: Flexbox-Layout ansehen …
nav > ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type: none;
  margin: 1.3em 0;
  flex: 1 1 100%;
}
Im Unterschied zum Beispiel aus dem Flexbox-Tutorial werden die Festlegungen durch den Kindselektor > nur für die direkten Kindelemente von nav getroffen; verschachtelte Listen werden untereinander angezeigt.

Aufklapp-Mechanismus[Bearbeiten]

Responsivität[Bearbeiten]

Ausblick[Bearbeiten]

Dieses Modell ist eher ein proof of concept als eine wirkliche Alternative zum einfacheren Umschalten von Navigationslisten mittels display.

Beispiel: Gerüst einer responsiven Webseite
nav li {
  display: inline;
}

@media screen and (max-width: 60em) {
  nav li {
    display: block;
    width: 100%;
  }
}
Normalerweise werden die Listenelemente nebeneinander dargestellt. Bei Viewports unter 60em werden die Listenelemente der Navigation untereinander auf 100% Breite dargestellt.

Weblinks[Bearbeiten]