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)

Beispielseiten

Inhaltsbereich

9.3 Tabbed Navigation – Navigation mit Registern

Tabs haben auf Webseiten nichts mit Corega zu tun, sondern sind die gängige Bezeichnung für das, was man auf Deutsch Karteireiter oder Register nennt.

Tabs werden gerne zur Navigation eingesetzt, weil sie die einzelnen Optionen deutlich hervorheben und vielen Anwendern vertraut sind.

Vorbereitende Maßnahmen für #navibereich

Quasi zur Vorbereitung ändern Sie ein paar Einstellungen für #navibereich:

  • Der Text im Navigationsbereich wird mithilfe der Eigenschaft text-align:right rechtsbündig ausgerichtet.
  • Der Hintergrund wird dem des Kopfbereichs angepasst, damit Kopf- und Navigationsbereich wie ein Bereich aussehen.
  • Das padding wird ein wenig geändert, damit der Bereich hübscher aussieht.
  • Der Navigationsbereich erhält zur optischen Abgrenzung eine hellgraue, untere Rahmenlinie.
ToDo: Den Navigationsbereich für die Register vorbereiten
  1. Ändern Sie den Navigationsbereich im CSS wie folgt:

    #navibereich {
      text-align: right; /* rechtsbündig */
      color: black;
      background: #ffe574 url(farbverlauf.jpg) repeat-y top left;
      padding: 5px 10px 4px 10px;
      border-bottom: 1px solid #8c8c8c;

    }

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

Nach diesen Änderungen sieht der obere Bereich der Webseite in etwa so aus:

Abbildung 9.3: Text rechts, Farbe anders, dunkle Rahmenlinie unten
Abbildung 9.3: Text rechts, Farbe anders, dunkle Rahmenlinie unten

Eine Anmerkung noch zur Ausrichtung der Listenelemente: text-align ist eine Eigenschaft zur Ausrichtung von Text und Inline-Elementen innerhalb eines Block-Elements. Da Listenelemente aber von Haus aus Block-Elemente sind, dürfte text-align hier eigentlich gar nicht funktionieren. text-align funktioniert nur deshalb, weil die li-Elemente im Navibereich per display:inline gebeten wurden, sich wie Inline-Elemente zu verhalten.

Statt des Werts right können Sie für text-align auch left (Standardwert) oder center probieren.

Die Hyperlinks im Navigationsbereich ändern

Die Hyperlinks im Navigationsbereich müssen ebenfalls etwas angepasst werden:

  • Die Links bekommen eine eigene Hintergrundfarbe.
  • Das padding wird erhöht, damit der Text etwas Abstand vom Kistenrand hat.
  • Die Hyperlinks bekommen rundherum die gleiche Rahmenlinie wie der Navigationsbereich unten.

Da die Hyperlinks jetzt ein eigenes padding bekommen, ist der rechte Außenrand für die Listenelemente nicht mehr nötig und wird im ToDo von 10px auf 0 gesetzt.

ToDo: Die Hyperlinks im Navigationsbereich vorbereiten
  1. Ändern Sie das CSS für den Navigationsbereich wie folgt:

    #navibereich li {
      display: inline;
      list-style-type: none;
      margin: 0; /* war vorher 10px für rechts */
    }
    #navibereich a {
      color: black;
      background-color: #ffeda0;
      padding: 4px 8px 4px 8px;
      border: 1px solid #8c8c8c;

    }

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

Nach diesen Änderungen sieht der obere Bereich der Webseite etwa so aus:

Abbildung 9.4: Mit geänderten Hyperlinks – schon fast fertig
Abbildung 9.4: Mit geänderten Hyperlinks – schon fast fertig

Einen Rollover-Effekt für die Hyperlinks definieren

Die Hyperlinks in der Navigation sollen einen Rollover-Effekt mit folgenden Gestaltungsmerkmalen bekommen. Sobald der Mauszeiger über den Links weilt,

  • wird die Unterstreichung der Links in jedem Fall entfernt,
  • bekommen die Hyperlinks schwarze Schrift auf weißem Hintergrund,
  • verschwindet die untere Rahmenlinie, sodass der Tab sich scheinbar nach unten öffnet.

Das Verschwinden der Rahmenlinie erreichen Sie durch eine einfache, aber geniale Variation: Wenn der Mauszeiger über dem Hyperlink schwebt, wird die untere Rahmenlinie weiß statt grau.

ToDo: Rollover-Effekt für die Links im Navigationsbereich definieren
  1. Ändern Sie das CSS für den Navigationsbereich wie folgt:

    #navibereich a:hover,
    #navibereich a:focus {
      color: black;
      background-color: white;
      border-bottom-color: white;
    /* war #d90000 */
    }

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

Nach diesen Änderungen sieht der obere Bereich der Webseite ungefähr so aus:

Abbildung 9.5: Gar nicht schlecht – die Navigation mit Rollover- Effekt
Abbildung 9.5: Gar nicht schlecht – die Navigation mit Rollover- Effekt