Horizontale Navigation mit CSS in 7 Schritten

Hyperlinks, Menüpunkte, Farbverlauf

∅ 4.8 / 21 Bewertungen

Hyperlinks, Menüpunkte, Farbverlauf

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:

40984_2-navigationsliste_schritt05.gif

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:

40985_2-navigationsliste_schritt06.gif

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:

40979_07navigationsliste_schritt06.gif

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:

40980_08gradient-image-maker_schritt07.gif

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:

40986_2-09navigationsliste_schritt07.gif

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:

40987_2-10navigationsliste_schritt07.gif

Die Grafik geht nahtlos in die Hintergrundfarbe über

Erinnern Sie sich noch an die ungestaltete Liste am Anfang des Artikels? Kaum wieder zu erkennen, aber sie ist es tatsächlich. Das häßliche 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.

Zu Teil 2: Druckversion per CSS

Zur Gesamtübersicht: HTML und CSS

Der Autor

pemueller110.jpg

Peter Müller

Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und veröffentlichte zahlreiche Bücher rund um das Thema Webpublishing. Seine Erklärungen sind nicht ausschließlich für Einsteiger oder Profis, sondern setzen einfach nur Interesse an der Materie voraus.

Im Web ist er auf infotekten.de zu Hause. Sein neues Buch heißt "Little Boxes - Webseiten gestalten mit CSS. Grundlagen". Kostenlose Leseproben können Sie auf little-boxes.de downloaden.