Navigationsleisten

Mit etwas aufwändigeren Angaben können komplette Navigationsleisten erstellt werden. Eine nutzerfreundliche Navigation ist als Liste aufgebaut, wobei jeder Listeneintrag einen Verweis enthält. Die Formatzuweisungen erfolgen über CSS.
Stand 27.02.2009

Inhaltsübersicht:

1. Horizontale und vertikale Navigationsleisten
2. Formatierung von Navigationsleisten

Horizontale und vertikale Navigationsleisten

Verweise als Bestandteil der Navigation sind einheitlich zu gestalten und müssen sich vom eigentlichen Inhalt der Webseite absetzen. Navigationsleisten bündeln Verweise inhaltlich und funktionell und bilden Informationsflüsse hierarchisch ab.

Wie bereits in Konventionen der Webnavigation beschrieben, sind horizontale und vertikale Navigationsleisten zu unterscheiden. Bei barrierefreiem bzw. barrierearmem Webdesign ist eine nutzerfreundliche Navigation als Liste aufgebaut, wobei jeder Listeneintrag einen Verweis enthält (siehe nachfolgendes Beispiel). Bei abgeschalteten Formatzuweisungen geht so die Zusammengehörigkeit nicht verloren.

Beispiel XHTML-Datei - Horizontale und vertikale Navigationsleisten (Ausschnitt):

<!-- Beginn horizontale Navigationsliste --> <ol id="horizontal">
<li><a href="navi1.html">Primär 1</a></li>
<li><a href="navi2.html">Primär 2</a></li>
<li><a href="navi3.html">Primär 3</a></li>
<li><a href="navi4.html">Primär 4</a></li>
<li class="displayed"><a href="navi5.html">Primär 5</a></li>
<!-- Ende horizontale Navigationsliste --> </ol>
[...]
<!-- Beginn vertikale Navigationsliste --> <ol id="vertical">
<li><a href="navi1.html">Sekundär 5.1</a></li>
<li><a href="navi2.html">Sekundär 5.2</a></li>
<li><a href="navi3.html">Sekundär 5.3</a></li>
<li><a href="navi4.html">Sekundär 5.4</a></li>
<li><strong class="activated">Sekundär 5.5</strong></li>
<!-- Ende vertikale Navigationsliste --> </ol>

Das vorangegangene Beispiel enthält Quelltext-Ausschnitte von zwei Navigationsleisten: eine im weiteren Verlauf dieses Artikels horizontal positionierte (ol id="horizontal") und eine vertikal angeordnete Liste (ol id="vertical").

Seitenanfang

Formatierung von Navigationsleisten

Um die im vorangehenden Beispiel definierte Liste horizontal zu positionieren, sind in der CSS-Datei ein paar Angaben notwendig, entscheidend ist die float-Anweisung. Die nachfolgenden Angaben sollen eine solche Formatierung exemplarisch verdeutlichen.

Beispiel CSS-Datei - Horizontale Navigationsleiste (Ausschnitt):

/* Liste für horizontale Navigationsleiste */ ol#horizontal {
/* Hintergrund: weiss */   background: #ffffff;
/* Textfarbe: schwarz */   color: #000000;
/* Listendarstellung: keine */   list-style: none;
/* Außenabstand: keiner */   margin: 0;
/* Innenabstand: keiner */   padding: 0;
}
/* Einzelne Listenpunkte in der horizontalen Navigationsleiste */ ol#horizontal li {
/* Hintergrund: weiss */   background: #ffffff;
/* Textfarbe: schwarz */   color: #000000;
/* Textumfluss: rechts vom Element */   float: left;
/* Schriftgröße: 1em */   font-size: 1em;
/* Zeichenabstand: 1px */   letter-spacing: 1px;
/* Außenabstand: rechts 1% */   margin: 0 1% 0 0;
/* Innenabstand: keiner */   padding: 0;
/* Breite: 19% */   width: 19%;
}

Eine mögliche Formatierung der Verweise solcher Navigationsleisten zeigt das nachfolgende Bild. Der obere Teil des Bildes enthält die horizontale, meist primäre Navigation und der untere Teil die vertikale, meist sekundäre Navigation. Beide Navigationsleisten zeigen die fünf möglichen Zustände eines Navigationspunktes (von links nach rechts bzw. von oben nach unten: unbesucht, besucht, Mouse-over, Fokus, aktiv). Beide Varianten sind farblich gleich gestaltet. Unbesuchte Verweise erhalten eine blaue Textfarbe, einen hellblauen Hintergrund und einen blauen Rahmen. Bei bereits besuchten Verweisen wird der Rahmen entfernt, die Textfarbe auf Violett gesetzt und die Schrift kursiv dargestellt. Der Mouse-over-Effekt wird durch rote Textfarbe, weißen Hintergrund, roten Rahmen und unterstrichenen Text verdeutlicht. Verweise mit Fokus nutzen die invertierte Darstellung - weißer, unterstrichener Text auf rotem Hintergrund. Der jeweils aktive Navigationspunkt sollte als Text statt als Verweis realisiert werden, um das Referenzieren einer Datei auf sich selbst zu vermeiden. Im Beispiel ist deshalb die Verweis-Funktion des imaginären aktiven Navigationspunktes entfernt und der Linktext als normaler Text mit schwarzer Textfarbe, weißem Hintergrund und einem schwarzen Rahmen umgesetzt.

Bildbeschreibung "Navigationsleisten": Abbildung der fünf möglichen Zustände eines Navigationspunktes. Von links nach rechts bzw. von oben nach unten: unbesucht, besucht, Mouse-over, Fokus, aktiv.

Seitenanfang