Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

Schritt 5: Den aktuellen Navigationspunkt hervorheben

In diesem Schritt geht es um die Rollover-Effekte und die Hervorhebung des aktuellen Navigationspunkts.

ToDo: Den aktuellen Navigationspunkt hervorheben
  1. Ergänzen Sie die vorhandenen Regeln wie folgt:

    #startseite #navi01 a,
    #galerieseite #navi02 a,
    #kontaktseite #navi03 a {
      color: black;
      background-color: white;
      border-left-color: #d90000; /* ersetzt #ffe574 */
      border-bottom: none; /* Unterstreichung aus */
    }
    #navibereich a:hover,
    #navibereich a:focus {
      color: black;
      background-color: white;
      border-left-color: #d90000;
      border-bottom: none;
    }
    #navibereich a:active {
      color: black;
      background-color: #d9d9d9;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im
    Browser.

Auch diese Deklarationen sind für sich genommen nicht schwierig. Der Trick liegt darin, dass die linke 3 Pixel breite Rahmenlinie eine andere Farbe bekommt. Zum Schluss wird noch die untere Rahmenlinie auf none gesetzt. Voilà! Fertig ist die Navigation. Oder zumindest fast:

Abbildung 16.6: Navigation mit gestalteter Liste
Abbildung 16.6: Navigation mit gestalteter Liste