Barrierefreie Navigation

Farbe zur Unterscheidung von Informationen
(Schritt 4 von 10)

Bitte verwenden Sie die Zurück-Funktion Ihres Browsers (Alt + linke Pfeiltaste), um die vorherige Seite wieder aufzurufen.
Oder drücken Sie Alt + F4 um das Fenster zu schliessen.

Die Erläuterungen finden Sie in Struktureller Aufbau einer Navigationsleiste aus dem Beitrag "Das Rückgrat des Webauftrittes: Die Navigation".

Der HTML-Code

<div id="hauptnavigation">
<ul>
<li><a href="eintrag1.html">Eintrag 1</a></li>
<li class="aktiv">
<div class="aktiv">Eintrag 2</div>
<ul>
<li><a href="eintrag2a.html">Eintrag 2 A</a></li>
<li><a href="eintrag2b.html">Eintrag 2 B</a></li>
</ul>
</li>
<li><a href="eintrag3.html">Eintrag 3</a></li>
</ul>
</div>


Die CSS-Deklarationen

#hauptnavigation ul li.aktiv div.aktiv {
color: #EE3338;
background-color: #FFF;
padding: 6px 7px;
}


Download

Ein komplettes Beispiel einer Navigation (3 Haupteinträge mit jeweils zwei Unterpunkten) samt CSS und Grafiken können Sie als ZIP-Datei herunterladen. (10 KB).