Horizontale Navigation mit CSS erstellen in 7 Schritten

Im traditionellen Webdesign wurden Navigationsbereiche oft aufwändig mit Grafiken und JavaScript realisiert. Mit CSS geht dies viel einfacher. Standardkonform, barrierefrei und flexibel. In diesem Kursabschnitt verwandeln Sie eine ungeordnete HTML-Liste Schritt für Schritt in einen hübschen, horizontalen Navigationsbereich.

Schritt 1: Zwei einfache Webseiten

Erstellen Sie in einem neuen Ordner zwei Webseiten namens index.html und kontakt.html. Irgendwo zwischen <head> und </head> geben Sie auf beiden Seiten die Wegbeschreibung zum Stylesheet an, das Sie in Schritt 2 erstellen:

<link href="navigation.css" type="text/css" rel="stylesheet" />

Um die Seiten im CSS später besser identifizieren zu können, erhält der <body>-Tag eine einmalige ID: auf der Startseite <body id="startseite">, auf der Kontaktseite <body id="kontaktseite">.

Da eine Navigation im Prinzip eine Auflistung von Hyperlinks ist, wird sie im HTML oft als einfache, ungeordnete Liste notiert. Das Aussehen der Liste regelt CSS. Erstellen Sie auf beiden Webseiten folgende Navigationsliste:

<ul id="navibereich">
  <li id="navi01"><a href="index.html">Startseite</a></li>
  <li id="navi02"><a href="kontakt.html">Kontakt</a></li>
</ul>

Diese Liste wird im Browser ungefähr so aussehen:

Eine einfache ungeordnete Navigationsliste

Jedes HTML-Element erzeugt im Browserfenster ein rechteckiges Kästchen. Schematisch dargestellt sind die Kästchen auf der Startseite wie folgt ineinander verschachtelt:

Schematische Darstellung der HTML-Elemente

Diese Kästchen (englisch "Boxes") gestalten Sie im folgenden mit CSS. Die vorsorglich vergebenen IDs benötigen Sie später, um die Elemente im CSS gezielt auswählen zu können.

Schritt 2: Stylesheet erstellen

Erstellen Sie ein leeres Stylesheet und speichern Sie es unter dem Namen navigation.css im selben Ordner wie die Webseiten. Definieren Sie zunächst die grundlegenden Schrifteinstellungen:

body {
  font-size: small;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Mit dieser einfachen CSS-Regel legen Sie Schriftgröße und -art für die Webseiten fest und überstimmen somit eventuelle Standardeinstellungen aus den Browser-Stylesheets.

Schritt 3: Listenelemente nebeneinander

Die Listenelemente stehen untereinander, weil li ein Block-Element ist und Block-Elemente einen integrierten Zeilenumbruch haben. Die folgende CSS-Regel verwandelt die Listenelemente im Navigationsbereich in Inline-Elemente und entfernt überdies die Aufzählungszeichen:

#navibereich li {
  display: inline;            /* Listenelemente nebeneinander */
  list-style-type: none;      /* Aufzählungszeichen entfernen */
}

Im Detail funktioniert diese CSS-Regel so:

Um die Änderungen auf den Navigationsbereich zu beschränken, benutzen Sie den verschachtelten Selektor #navibereich li, der in normalem Deutsch soviel bedeutet wie "Gestalte alle li-Kisten in der Kiste mit der ID navibereich".
display: inline bewirkt die Verwandlung der li-Elemente in Inline-Elemente. Inline-Elemente haben keinen integrierten Zeilenumbruch und stehen deshalb nebeneinander.
list-style-type: none schließlich entfernt explizit die Aufzählungspunkte.

Und so sieht die Navigationsliste jetzt aus:

Die Listenelemente nebeneinander und ohne Aufzählungspunkte

Noch nicht perfekt, aber die Richtung stimmt. Beachten Sie den Einzug von links vor dem ersten Navigationspunkt. Er wird im nächsten Schritt entfernt.

Genauere Informationen zu Block- und Inline-Elementen

Falls Ihnen die Begriffe Block- und Inline-Elemente unbekannt sind, finden Sie auf der Seite "Begriffsbestimmungen" in unserem Kurs CSS-Einführung die jeweilige Definition. Ausführlichere Erklärungen liefert dabei das Kapitel Schriftformatierungen sowie Passagen auf SelfHTML.de: Details zu Block- und Inline-Elementen.

Schritt 4: Hintergrundfarbe und Abstände definieren

Die folgende CSS-Regel weist dem Navigationsbereich eine Hintergrundfarbe zu und definiert dessen Innen- und Außenabstände sowie die Rahmenlinien oben und unten:

#navibereich {
  background-color: #F7FFC3;        /* Hintergrundfarbe für die Navigation */ 
  padding: 4px 0;                   /* Innenabstand: oben/unten 4px, li/re 0 */
  border-top: 3px solid #668BCC;    /* Rahmenlinie oben */
  border-bottom: 3px solid #668BCC; /* Rahmenlinie unten */
  margin: 0;                        /* Keinen Außenabstand */ 
}

Jetzt sieht der Navigationsbereich schon etwas ansehnlicher aus:

Der Navigationsbereich mit Farben und Abständen

Unterschiedliche Abstände in Internet Explorer und Firefox ausgleichen

Ungeordnete Listen haben ohne die Definition von padding und margin einen linken Einzug. Firefox erzeugt diesen als padding, der Internet Explorer als margin. Um die unterschiedlichen Browser-Stylesheets außer Kraft zu setzen, sollten Sie für eine Liste immer sowohl padding als auch margin definieren.

Schritt 5: Die Hyperlinks gestalten

Um die Hyperlinks etwas hübscher zu gestalten, weisen Sie Ihnen eine Textfarbe zu und entfernen die Unterstreichung:

#navibereich a {
  color: black;                  /* Schriftfarbe schwarz */ 
  text-decoration: none;         /* Unterstreichung entfernen */ 
  padding: 4px 8px;              /* oben/unten 4px, re/li 8px */
}

Zusätzlich bekommen die Links mit padding noch ein kleines Luftpolster drum herum. Dies sorgt unter anderem dafür, dass der folgende Hover-Effekt besser aussieht:

#navibereich a:hover {
  background-color: #EDEDF8;
}

Wenn die Maus im Navigationsbereich über einem Hyperlink schwebt, verändert sich dessen Hintergrundfarbe:

Navigation mit gestalten Hyperlinks und Hover-Effekt

Schritt 6: Aktuellen Menüpunkt hervorheben

Was zu einer benutzerfreundlichen Navigation noch fehlt, ist das Signal "Sie sind hier", die optische Rückmeldung an den Besucher, auf welcher Seite er sich gerade befindet. Und wie so oft ist die Lösung einfach, wenn man weiß wie. Im HTML haben Sie für body eine ID definiert:

<body id="startseite"> auf der Startseite
<body id="kontaktseite"> auf der Kontaktseite

Bei der Erstellung der Navigationsliste wurde den Listenelementen li ebenfalls eine ID zugewiesen:

<li id="navi01"> im Menüpunkt für die Startseite
<li id="navi02"> im Menüpunkt für die Kontaktseite

Eine Kombination dieser IDs benutzen Sie, um mit Hilfe einfacher verschachtelter Selektoren den aktuellen Menüpunkt hervorzuheben. Ergänzen Sie dazu die CSS-Regel für a:hover um die beiden fett gedruckten Selektoren:

#navibereich a:hover,        /* mit Komma am Ende */
#startseite #navi01 a,       /* mit Komma am Ende */
#kontaktseite #navi02 a {    /* ohne Komma am Ende */
  background-color: #c3d9ff;
}

Der verschachtelte Selektor #startseite #navi01 a bedeutet umgangssprachlich "Alle Hyperlinks in der Kiste mit der ID navi01, die in einer Kiste mit der ID Startseite liegt." Die schematische Darstellung der HTML-Elemente am Anfang des Artikels verdeutlicht diesen Sachverhalt.

Die für den Hover-Effekt definierte Hintergrundfarbe gilt jetzt für alle drei Selektoren. Der Trick ist im Grunde ganz einfach:

Die Kombination #startseite #navi01 a gibt es nur auf der Startseite,
Die Kombination #kontaktseite #navi02 a gibt es nur auf der Kontaktseite.

Einfach. Genial. Und so sehen die beiden Webseiten jetzt aus:

Die Navigation mit Hervorhebung des aktuellen Navigationspunktes

Und schon haben Sie eine flexible horizontale Navigation. Wenn Sie den Schriftgrad vergrößern oder verkleinern, passt sich die Navigation mühelos an:

Die Navigation mit stark vergrößertem Schriftgrad

Schritt 7: Farbverlauf per Hintergrundgrafik

Eine Möglichkeit, der Navigation etwas Eleganz zu verleihen, ist die Verwendung eines Farbverlaufes (englisch "Gradient"). Dazu benötigen Sie zunächst eine Grafik mit dem gewünschten Farbverlauf. Diese Grafik weisen Sie im CSS den Hyperlinks als Hintergrundgrafik zu.

Am einfachsten ist die Erstellung der Grafik mit Farbverlauf wahrscheinlich mit dem Gradient Image Maker von dynamicdrive.com. Mit den genauen Werten können Sie ruhig etwas experimentieren, aber benutzen Sie für diese Übung die folgende Abbildung als Orientierung:

Der Gradient Image Maker von DynamicDrive.com

Wenn Sie mit der Vorschau auf der Webseite zufrieden sind, klicken Sie auf die Schaltfläche "Get full size image". Daraufhin öffnet sich ein neues Browserfenster mit der frisch erzeugten, im Beispiel 10 x 20 Pixel großen Grafik. Klicken Sie mit der rechten Maustaste auf die Grafik und speichern Sie sie im Übungsordner unter dem Namen farbverlauf.jpg.

Um die Grafik einzubinden, ergänzen Sie das Stylesheet um die fett gedruckten Deklarationen:

#navibereich a:hover,        
#startseite #navi01 a,       
#kontaktseite #navi02 a {
  background-color: #c3d9ff;
  background-image: url(farbverlauf.jpg);/* Hintergrundgrafik einfügen */
  background-repeat: repeat-x;           /* von links nach rechts wiederholen */
  background-position: top left;         /* oben links beginnen */ 
}

Die neuen Deklarationen bedeuten im Einzelnen folgendes:

background-image gibt den Pfad zur gewünschten Grafik an, und zwar immer relativ zum Speicherort des Stylesheets (nicht der HTML-Dateien).
background-repeat definiert die Art der Wiederholung. Dabei sind die Werte repeat-y (von oben nach unten), repeat-x (von links nach rechts) oder no-repeat möglich.
background-position schließlich sagt dem Browser, dass die Hintergrundgrafiken im selekierten Kästchen links oben beginnen soll.

Mit diesen Anweisungen sieht die Navigationsleiste jetzt ungefähr so aus:

Der Navigationsbereich mit Farbverlauf

Die Grafik wächst bei Schriftvergrößerungen zwar nicht mit, aber da der Farbverlauf unten mit der für den Hintergrundfarbe definierten Farbwert (#c3d9ff) endet, entsteht auch bei einer Vergrößerung der Schrift kein erkennbarer Übergang zwischen Grafik und Hintergrundfarbe:

Die Grafik geht nahtlos in die Hintergrundfarbe über

Erinnern Sie sich noch an die ungestaltete Liste am Anfang des Kapitels? Kaum wieder zu erkennen, aber sie ist es tatsächlich. Das hässliche Entlein ist zum Schwan geworden.

Weitere Informationen zur Einbindung von Hintergrundgrafiken

CSS4You.de ist eine hervorragende CSS-Referenz und dort erhalten Sie auch weitere Informationen zum Einbinden von Hintergrundgrafiken in CSS.

Fazit

Mit wenigen CSS-Regeln verwandeln Sie eine normale, ungeordnete HTML-Liste in einen ansehnlichen Navigationsbereich. Standardkonform, barrierefrei und flexibel.

Stylesheets in der Praxis