Horizontale Navigation

Meist basiert eine Navigation auf einer ungeordneten Liste. Denn letztlich ist ein Auswahlmenü ja nicht mehr als eine Liste von Hyperlinks. Jedoch kann diese Liste per CSS sehr unterschiedlich gestaltet werden.

Ausgangssituation

Ziel

Wir möchten eine horizontale Navigation, die an Registerblätter (Reiter, engl. Tabs) erinnert.

... und so könnte man es machen:

<li> ist ein Blockelement. Diese können durch display:inline; am Bildschirm zu Inline-Elementen umgewandelt werden und stehen dann nebeneinander. Mit den entsprechenden PADDINGs, BORDERs und MARGINs können sie nun gestaltet werden, hier muss man einfach etwas experimentieren. Siehe auch hier. Durch Hintergrundbilder ergeben sich noch mehr Möglichkeiten..

Die Hyperlinks in diesem Beispiel sind ohne Funktion, im IE6 sieht es evtl. nicht ganz so aus wie gewünscht. Fertig sieht es etwa so aus.

Seite 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum. Fusce vitae lorem. Curabitur sapien mauris, fringilla sed, feugiat et, scelerisque eu, augue. Cras quam erat, lobortis ut, sagittis eu, convallis eu, nunc. Sed odio nibh, venenatis id, rutrum sit amet, dignissim vel, dui. Cras sed purus. Phasellus id quam nec tortor egestas scelerisque. Aenean dui mi, tincidunt eu, nonummy id, euismod laoreet, ligula. Cras eleifend ullamcorper tortor. Praesent vehicula turpis non ipsum. Curabitur tincidunt aliquet urna. Nulla facilisi. Donec a ligula.

Optische Hervorhebung des aktuellen Links

Zunächst einmal werden alle Links der Navigation optisch einheitlich gestaltet, indem sie oder ihr umgebendes <li> alle die gleichen Eigenschaften erhalten.

Desweiteren bekommt nun der Body einer jeden einzelnen Seite eine individuelle ID. Aus Gründen der Übersichtlichkeit bietet sich hier der Dateiname an.

Beispiel für die Datei index.html:

<body id="index">

Ferner werden die Listeneinträge ebenfalls mit einer ID versehen, am besten durchnummeriert.

<ul>
  <li id="nav01"><a href="index.html">Startseite</a></li>
  <li id="nav02"><a href="seite2.html">Seite 2</a></li>
  <li id="nav03"><a href="seite3.html">Seite 3</a></li>
</ul>

Im CSS werden nun die jeweils korrespondierenden IDs kombiniert und mit den alternativen Hervorhebungseigenschaften versehen, in diesem Beispiel Hintergrundfarbe und unterer Rand. Durch den nicht mehr sichtbaren border-bottom entsteht der Eindruck, der Tab sei nach unten offen.

#index #navi #navi01 a,
#seite2 #navi #navi02 a,
#seite3 #navi #navi03 a
 {
  background-color: #cfcfcf;
  border-bottom-color: #cfcfcf;
}

Die Selektoren des CSS lesen sich (pro Zeile von rechts nach links) also folgendermassen:

Anker <a> innerhalb eines Elementes mit der ID "navi01", welche sich innerhalb eines "navis" befinden, welcher sich innerhalb eines Elementes mit der ID "index" befindet (also der body der Startseite), sollen eine bestimmte Hintergrundfarbe und unteren Rahmen erhalten
Anker <a> innerhalb eines Elementes mit der ID "navi02", welche sich innerhalb eines "navis" befinden, welcher sich innerhalb eines Elementes mit der ID "seite2" befindet, sollen eine bestimmte Hintergrundfarbe und unteren Rahmen erhalten
Anker <a> innerhalb eines Elementes mit der ID "navi03", welche sich innerhalb eines "navis" befinden, welcher sich innerhalb eines Elementes mit der ID "seite3" befindet, sollen eine bestimmte Hintergrundfarbe und unteren Rahmen erhalten

Von den Zeilen im CSS trifft pro Dokument nur eine zu und färbt den entsprechenden Menüpunkt anders. Die restlichen Zeilen werden ignoriert. Kommt ein <li> dazu, muß das CSS erweitert werden.

Dies war nur ein Beispiel, es gibt noch weitere Ansätze, dasselbe oder ein ähnliches Ziel zu erreichen. Wichtig ist einfach nur der kreative Einsatz der Grundmechanismen.

CSSKiste.de