Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Eine Linkliste soll in Form eines eleganten Menüs dargestellt werden (siehe folgende Abbildung).

Links mit Stil

Abbildung: Links mit Stil.

Lösung

Zu Beginn legen Sie die Links als ungeordnete Liste an, die von einem div-Element umgeben wird, das seinerseits ein id-Attribut enthält:

<div id="navsite">
  <p>Navigationsmenü:</p>
  <ul>
    <li><a href="/">Startseite</a></li>
    <li><a href="/about/">Über uns</a></li>
    <li><a href="/archives/">Archive</a></li>
    <li><a href="/writing/">Schreiben</a></li>
    <li><a href="/speaking/">Sprechen</a></li>
    <li><a href="/contact/">Kontakt</a></li>
  </ul>
</div>

Der größte Teil des Designs entsteht durch die Verwendung der Eigenschaft border für das Anker-Element (a):

#navsite p {
 display: none;
}
#navsite {
 font-family: Verdana, Helvetica, Arial, sans-serif;
 font-size: 0.7em;
 font-weight: bold;
 width: 12em;
 border-right: 1px solid #666;
 padding: 0;
 margin-bottom: 1em;
 background-color: #9cc;
 color: #333;
}
#navsite ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#navsite ul li {
 margin: 0;
 border-top: 1px solid #003;
}
#navsite ul li a {
 display: block;
 padding: 2px 2px 2px 0.5em;
 border-left: 10px solid #369;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #036;
 color: #fff;
 text-decoration: none;
 width: 100%;
}
html>body #navsite ul li a {
 width: auto;
}
#navsite ul li a:hover {
 border-left: 10px solid #036;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #69f;
 color: #fff;
}

Diskussion

Damit das Navigationsmenü als solches zu erkennen ist, erhalten die Links eigene Stildefinitionen, sodass sie sich vom übrigen Text unterscheiden. In diesem Fall verwenden Sie beim Schreiben der Definitionen den ID-Selektor. Wie in der Lösung zu sehen ist, müssen neben der Implementierung des reinen CSS-Designs die Programmierfehler ("Bugs") in bestimmten Browsern umgangen werden, damit die Darstellung korrekt funktioniert.

Innerhalb des div-Elements gibt es einen Absatz, der die Links als Navigationsmenü kennzeichnet:

<p>Navigationsmenü:</p>

In Browsern ohne CSS-Unterstützung wird diese Textzeile angezeigt. In CSS-fähigen Benutzerprogrammen ist der Text nicht notwendig und wird verborgen, indem man die Eigenschaft display auf den Wert none setzt:

#navsite p {
 display: none;
}

Die Werte der in dieser Regel für das div-Element definierten Eigenschaften werden per Vererbung an die Links weitergegeben. Die Werte für width, border-right, padding und margin-bottom sollen dafür sorgen, dass sich die Links nicht zu sehr "auf der Pelle hocken":

#navsite {
 font-family: Verdana, Helvetica, Arial, sans-serif;
 font-size: 0.7em;
 font-weight: bold;
 width: 12em;
 border-right: 1px solid #666;
 padding: 0;
 margin-bottom: 1em;
}

In der folgenden CSS-Regel werden mögliche Probleme mit der Einrückung von Listen (siehe das Rezept Browserübergreifende Einrückungen) verhindert, indem margin und padding den Wert 0 erhalten. Gleichzeitig wird die Darstellung von Listenmarkern (Aufzählungszeichen) unterbunden:

#navsite ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

Die folgende Regel stellt sicher, dass die einzelnen Listeneinträge und die Liste selbst keine Außenabstände erhalten. Gleichzeitig wird dafür gesorgt, dass die Oberseite der Einträge mit einem 1 Pixel breiten Rahmen versehen wird, wodurch die einzelnen Listenelemente visuell besser voneinander getrennt werden:

#navsite ul li {
 margin: 0;
 border-top: 1px solid #003;
}

In der nun folgenden Regel werden die Stildefinitionen für die Links festgelegt. Standardmäßig werden Links als Inline-Elemente behandelt. Für das von uns gewünschte Design müssen Links aber als Block-Elemente dargestellt werden, damit der gesamte Link- Bereich und nicht nur die Beschriftung (zum Beispiel der Text "Startseite") anklickbar wird. Dazu weisen wir der Eigenschaft display den Wert block zu.

Für die Gestaltung von Rahmen, Textfarbe, Textdekorationen und der Breite benutzen wir die folgenden Definitionen:

#navsite ul li a {
 display: block;
 padding: 2px 2px 2px 0.5em;
 border-left: 10px solid #369;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #036;
 color: #fff;
 text-decoration: none;
 width: 100%;
}

Die letzte Definition legt die Breite der Links mit 100% fest, damit der gesamte Bereich auch in Internet Explorer anklickbar ist. Der Nachteil dieser Regel besteht darin, dass sie neue Probleme bei der Darstellung in Internet Explorer 5 für Macintosh sowie Netscape Navigator 6+ schafft. Um dieses Problem zu umgehen und die Breite des Links wieder zurückzusetzen, verwenden Sie den Kindselektor, der von Internet Explorer für Windows nicht verstanden wird (siehe auch das Rezept Besondere Werte für Internet Explorer 5.x für Windows):

html>body #navsite ul li a {
 width: auto;
}

In der letzten CSS-Regel wird schließlich der Rollover-Effekt für die Links implementiert:

#navsite ul li a:hover {
 border-left: 10px solid #036;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #69f;
 color: #fff;
}

Eine ungeordnete Liste bietet die perfekte Struktur für ein Linkmenü – sowohl theoretisch wie auch in der praktischen Anwendung. Immerhin ist eine Linkliste eine Liste ungeordneter Dinge. Die Verwendung von ungeordneten Listen für die Navigation ergibt demnach eine solide Struktur, die sich sowohl logisch als auch semantisch korrekt in der Dokumentstruktur niederschlägt.

Gleichzeitig erleichtert die Organisation der Links in einer ungeordneten Liste die Darstellung in Menüform. Bei der Verwendung von mehreren div-Elementen ist das nicht so einfach:

<div id="navsite">
  <p>Navigationsmenü:</p>
  <div><a href="/">Startseite</a></div>
  <div><a href="/about/">Über uns</a></div>
  <div><a href="/archives/">Archive</a></div>
  <div><a href="/writing/">Schreiben</a></div>
  <div><a href="/speaking/">Sprechen</a></div>
  <div><a href="/contact/">Kontakt</a></div>
</div>

Siehe auch

"CSS Design: Taming Lists" von Mark Newhouse und den Artikel beziehungsweise die Anleitung "Semantics, HTML, XHTML, and Structure" von Shirley E. Kaiser.

  

<< zurück vor >>

 

 

 

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

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