1.7 Interaktion / User Interface

Navigation durch Listen-Elemente

Ein Webstandard, der sich über die Jahre etabliert hat, ist, Navigationen durch Listenelemente zu erstellen. HTML stellt zwei Listentypen zur Verfügung, die Aufzählungsliste (mit Bulletpoints) <ul> und die geordnete Liste (mit Zahlen) <ol>. Für Navigationen verwendet man in der Regel Aufzählungslisten

  • <ul> leitet eine Aufzählungsliste ein (ul = unordered list = unsortierte Liste).
  • Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag).
  • </li> beendet den Listeneintrag.
  • </ul> beendet die Liste.
  • Das Verschachteln von Listen ist auch möglich. Zwischen <li> und </li> kann jeweils eine weitere gesamte Liste stehen.

Beispiel 1 – Vertikale Navigation:

See the Pen Horizontal Navigation by Andreas (@ernasad) on CodePen.

Die schon kennengelernten Techniken wie Transforms lassen sich nun auch für Navigationen verwenden.

Beispiel 2 – Horizontale Navigation:

See the Pen Horizontal Navigation by Andreas (@ernasad) on CodePen.

Beispiel 3 – Dropdown Navigation:

See the Pen Dropdown Navigation by Andreas (@ernasad) on CodePen.

Weiteres Beispiel für ein Dropdown-Menü: http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

Aufgabe:
Erstelle ein vertikales Menü mit den Menüpunkten 1, 2, 3, 4. Verwende bereits bekannte Transforms, um die einzelnen Buttons der Navigation und ihre Rollover-Zustände zu stylen.

Spaß mit JavaScript