12 – Grundlagen HTML & CSS: So richten Sie ein Untermenü mit einem Listen-Element ein

In dieser Video-Lektion fügen wir unserer Internetseite ein Untermenü ein. Dies geschieht durch die Verschachtelung von Listen. Ob diese Verschachtelung später in einem horizontalen oder vertikalen Klappmenü oder einem einfachen (offenen) Navigationsaufbau endet spielt dabei erst einmal keine Rolle. Die Entscheidung der Darstellung geschieht erst in der CSS-Datei. Hier müssen dann die richtigen CSS-Eigenschaften verwendet werden, um zum Beispiel ein Klappmenü zu realisieren.

Der Grundsätzliche Aufbau einer verschachtelten Navigation sieht im HTML wie folgt aus:

<ul>
  <li><a href="#.html"> Menü 1. Ebene</a></li>
  <li><a href="#.html"> Menü 1. Ebene </a>
    <ul>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
    </ul>
  </li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
</ul>

Wichtig ist hierbei zu erkennen, dass das innere ul-Element Inhalt eines li-Elements ist und erst nach einem geschlossenen Anker des li-Elements eingefügt wird. Mittels CSS und der Verwendung von Klassen und IDs auf einzelne HTML-Elemente kann die Navigation so aufbereitet werden, dass zum Beispiel ein Klappmenü realisiert werden kann.

In dieser Video-Lektion wird noch kein Klappmenü realisiert, da es tiefere Kenntnisse in CSS erfordert. Zum jetzigen Zeitpunkt tut es eine einfache, vertikale Navigation, die die nächste Ebene der Navigation komplett öffnet. In einer separaten Lektion werde ich die Funktionsweise und CSS-Aufbereitung für ein Klappmenü noch einmal ausführlich erklären. Vielleicht finden Sie ja einen entsprechenden Beitrag schon in diesem Blog? Die Suchfunktion kann Ihnen hier weiterhelfen!