XML-Technologien / CSS / CSS Kochbuch / Links und Navigation / Hierarchische Navigation

Hierarchische Navigation

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll eine verschachtelte Liste erzeugt werden (siehe nächste Abbildung), um einen hierarchischen Pfad von Links ("Brotkrümelspur") zu erstellen, der wieder zur Startseite zurückführt (siehe übernächste Abbildung).

Standarddarstellung der verschachtelten Liste

Abbildung: Standarddarstellung der verschachtelten Liste.

Die Brotkrümelspur: der hierarchische Pfad

Abbildung: Die "Brotkrümelspur": der hierarchische Pfad.

Lösung

Im ersten Schritt müssen Sie eine korrekt angelegte Liste ineinander verschachtelter Links anlegen, die die Position des Dokuments innerhalb der Website wiedergeben:

<div id="crumbs">
  <h3>Sie befinden sich hier:</h3>
  <ul>
    <li><a href="/">Startseite</a>
      <ul>
        <li><a href="/writing/">Schreiben</a>
          <ul>
            <li><a href="/writing/books/">Bücher</a>
              <ul>
                <li><a href="/writing/books/">CSS Kochbuch</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Im folgenden Schritt legen Sie für die Elemente ul und li die Werte für die Eigenschaft display fest:

#crumbs {
 background-color: #eee;
 padding: 4px;
}
#crumbs h3 {
 display: none;
}
#crumbs ul {
 display: inline;
 padding-left: 0;
 margin-left: 0;
}
#crumbs ul li {
 display: inline;
}
#crumbs ul li a:link {
 padding: .2em;
}

Jeder verschachtelte Listeneintrag erhält ein kleines Hintergrundbild, das einen Pfeil darstellt und links vom eigentlichen Link angezeigt wird:

crumbs ul ul li{
 background-image: url(arrow.gif);
 background-repeat: no-repeat;
 background-position: left;
 padding-left: 12px;
}

Diskussion

Die Bezeichnung Brotkrümelspur geht auf das Märchen "Hänsel und Gretel" zurück. Eine solche Spur soll Leuten helfen, wieder nach Hause zu finden. Im Web zeigt eine solche Brotkrümelspur beziehungsweise der hierarchische Pfad dem Benutzer den Weg zur gerade betrachteten Seite (siehe folgende Abbildung).

Beispiel für eine Brotkrümelspur

Abbildung: Beispiel für eine Brotkrümelspur.

Würden mehr Browser das Pseudoelement :before unterstützen, könnte hier auf die Verwendung der Eigenschaft background-image verzichtet werden. Stattdessen könnte die folgende CSS-Regel verwendet werden (siehe auch Rezept Aktive Tabellenzeilen hervorheben):

#crumbs ul ul li:before {
 content: url(arrow.gif);
}

Zu dem Zeitpunkt, als dieses Buch geschrieben wurde, wurde das Pseudoelement :before nur von Firefox, Safari, Netscape Navigator 6+ und Opera 5+ unterstützt.

Siehe auch

Untersuchungsergebnisse zur Effektivität von hierarchischen Pfaden.

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Printlayouts mit CSS & HTML

XML-Grundlagen

ePub

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln