Listen und Navigationsleisten

Ungeordnete Listen

Das Element ul beschreibt eine Aufzählungsliste, also eine Liste, bei der die Reihenfolge der Elemente nur eine untergeordnete oder keine Rolle spielt. ul steht dabei für unordered list, ungeordnete, unsortierte Liste. Aufzählungslisten sind z.B. von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden die Listeneinträge von grafischen Browsern standardmäßig mit einem Aufzählungszeichen (Bullet) versehen. Aufzählungslisten eignen sich sehr gut, um Navigationsleisten in Webseiten zu strukturieren.
ul leitet eine Aufzählungsliste ein. Mit li beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). Wie das Aufzählungszeichen (Bullet) dargestellt wird, bestimmt dabei der Web-Browser. Dessen Darstellung kann jedoch mit CSS (list-style-type) beeinflusst werden.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

Zur Formatierung von Listen dient neben den schon bekannten Text-Eigenschaften die CSS-Eigenschaft list-style. Die Eigenschaft list-style ist eine Zusammenfassung der möglichen Einzelangaben zu list-style-type, list-style-position und list-style-image.

Geordnete Listen

Das Element ol bezeichnet eine geordnete oder nummerierte Liste, englisch ordered list, also eine Liste, bei der die Reihenfolge der Elemente von Bedeutung ist.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>

Beschreibungslisten

Beschreibungslisten werden mit dl-Elementen aufgebaut. dl steht dabei für definition- bzw. description list. Solche Listen sind beispielsweise für Glossare gedacht. Ein Glossar besteht meist aus einer Liste von Einträgen, die wiederum aus mindestens einem zu erklärenden Sachverhalt nebst mindestens einer Erklärung besteht.

<dl>
      <dt>allg.</dt>
      <dd>allgemein</dd>

      <dt>bez.</dt>
      <dd>bezüglich</dd>
      <dd>bezahlt</dd>

      <dt>u. a.</dt>
      <dd>unter anderem, unter anderen</dd>
      <dd>und andere, und anderes</dd>

      <dt>zzgl.</dt>
      <dd>zuzüglich</dd>
</dl>

See the Pen bcb18b9b6fed934017954693ba6f661d by Bernd Schiller (@Bernie14153) on CodePen.

Verschachteln von Listen

Listen können auch ineinander verschachtelt werden. Solche verschachtelte Listen können z.B. für Inhaltsverzeichnisse verwendet werden. Auch eine Navigation mit Untermenüs wird gerne mithilfe einer Aufzählungsliste formuliert.

See the Pen b2e1e3cb77ffc8b5a5fbaf367a521f4e by Bernd Schiller (@Bernie14153) on CodePen.

Hyperlinks

Bevor wir dazu übergehen, Navigationsleisten mit Hilfe von HTML-Listen zu gestalten, müssen wir uns kurz dem Thema 'Hyperlinks' widmen. Mit Hyperlinks oder Links (to link, engl. „verbinden“) werden Stellen in einem Dokument bezeichnet, die die Möglichkeit bieten, auf ein anderes Dokument oder zu einer anderen Stelle im selben Dokument zu verweisen und mit einem Klick oder Tap dort hin zu springen.
In HTMLnutzen wir zum Erstellen von links das a-Element. Mit einem a-Element kann man einen Link zu einem anderen Dokument oder zu einem Anker (anchor) setzen. Das a-Element besitzt verschiedene Attribute, von denen nur href, das Verweisziel, unverzichtbar ist. Seit HTML5 können mittlerweile fast alle relevanten Elemente mit einem a-tag versehen werden.

<a href="http://www.schiller-bernd.de">Homepage von Bernd Schiller</a>

Es ist mit Hilfe eines Links auch möglich, innerhalb eines Dokuments eine bestimmte Stelle, einen Anker, anzusteuern. Dazu muss das Sprungziel mit einem ID-Attribut eindeutig benannt sein.

<a href="http://www.schiller-bernd.de/w-seminar.html#spannendeInfo">Spannende Information</a>

...

<p id="spannendeInfo">blablabla</p>

Wie alle HTML-Elemente kann auch das a-Element mittels CSS beliebig formatiert werden. Allerdings sollten die Links, die standardmäßig mit blauer Schriftfarbe und Unterstreichung gekennzeichnet sind, immer für den User erkennbar bleiben. Dies ist besonders wichtig bei Touchscreens, bei denen eine hover-Effekt (Änderung der Formatierung beim Überfahren mit der Maus) unwirksam bleibt. Eine Ausnahme bilden Links innerhalb einer Navigationsleiste, die eindeutig als solche erkennbar ist.

Navigationsleisten

Zur Erstellung einer komfortablen Navigation mit CSS werden in der Praxis sehr gerne Listen verwendet. Die Liste wird dazu noch in das semantische Strukturelement nav eingebunden, das wir an späterer Stelle noch genauer kennenlernen werden. Das Grundgerüst für eine Navigationsleiste sieht wie folgt aus (Auf die URLs wurde verzichtet. Auch in der Praxis werden sie selten schon beim Erstellen der Leiste eingefügt):

<nav>
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Informatik</a></li>
      <li><a href="#">Sport</a></li>
      <li><a href="#">Englisch</a></li>
      <li><a href="#">Ethik</a></li>
   </ul>
</nav>

Vertikale Navigationsleisten

See the Pen b7f2468bde34a9a639b08bc932760c25 by Bernd Schiller (@Bernie14153) on CodePen.

Horizontale Navigationsleisten

Um aus einer Liste ein horizontales Navigationsmenü zu erstellen, gibt es drei Möglichkeiten: Man kann erstens die Anzeigeart der li-Elemente auf display: inline stellen. Damit wird der Zeilenumbruch am Ende des li-Elements (Standardeinstellung display: block) entfernt und alle Listenelemente werden in derselben Zeile angezeigt.
Will man allerdings gleich breite horizontale Listenelemente für die Navigation, muss man die Eigenschaft float verwenden.
Als dritte Möglichkeit kommt noch der Einsatz des Flexbox-Modells in Frage.

See the Pen a8e38515273e4ae861c118d2488fd1e8 by Bernd Schiller (@Bernie14153) on CodePen.

See the Pen 869e5aa66ec9a7f0c9af2a169286b537 by Bernd Schiller (@Bernie14153) on CodePen.

Aufklappbares Navigationsmenü

Mit Hilfe von verschachtelten Listen lassen sich auch elegante Navigationsleisten mit aufklappenden Untermenüs gestalten. Im folgenden Beispiel besitzt der Menüpunkt 'Informatik' ein Untermenü. Die Menüs können theoretisch beliebig tief verschachtelt werden, doch in der Praxis sollte man hier maximal drei Hierarchieebenen verwenden. Zudem ist zu beachten, dass für Geräte mit Touchscreen eine alternative Lösung gefunden werde muss, da diese nicht mit der :hover-Eigenschaft umgehen können.

See the Pen 0127fa7b2c436a8af264454b527ed9a9 by Bernd Schiller (@Bernie14153) on CodePen.

Akkordeon

Interessante vertikale Akkordeon-Menüs lassen sich auch mit HTML und CSS erstellen:

See the Pen 8197f7e990112c5b84b119ca951286cc by Bernd Schiller (@Bernie14153) on CodePen.