Listen stylen mit CSS
Bartelme Design zeigt Ihnen, wie Sie mit Hilfe von Cascading Stylesheets eine normale Liste in eine Navigationsleiste verwandeln.
Navigation mittels Tabs
Viele Seiten verwenden bereits Tabs als primäres Navigationskonzept. Doch deren Erstellung ist meist mit viel Aufwand verbunden und das Ergebnis häufig in Hinblick auf Accessibility nicht optimal. Bartelme Design zeigt, wie einfache Listen mit Hilfe von CSS in Navigations-Elemente, wie in der Abbildung unterhalb zu sehen, umgewandelt werden können.
Einfach und semantisch korrekt
Ganz egal, ob die primäre Navigation einer Seite horizontal oder vertikal ausgerichtet ist, im Prinzip handelt es sich immer um eine Auflistung von Menüpunkten. Aus diesem Grund sollte für diese Zwecke auch das in HTML dafür vorgesehene Listenelement verwendet werden. Detaillierte Information über die unterschiedlichen Anwendungsarten von Listen finden Sie auf MaxDesign.
„Wieso sollte ich die Navigation mit Hilfe des HTML-Listenelements erstellen“, werden Sie sich vielleicht fragen, „Ich will doch keine Aufzählungspunkte davor haben“. Dies ist häufig der Grund dafür, dass einfache Aufzählungen von Links noch immer mit Tabellen oder ähnlichen Konstrukten erzeugt werden — dabei kann das Aufzählungszeichen mit Hilfe von CSS einfach in eine alternative Grafik umgewandelt oder gänzlich weggelassen werden.
ul {
list-style: none;
}
Listenelemente nebeneinander anordnen
Auch die Darstellung in Form einer horizontalen Navigationsleiste, wie sie auch auf dieser Seite zum Einsatz kommt, kann durch geschickten Einsatz von CSS erreicht werden. Ausgangspunkt für unsere überlegungen soll folgendes Stück Code darstellen:
<ul id=“mainnavi”>
<li>Item 1</li>
<li id=“current”>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Fügen wir der Seite nun beispielsweise folgendes Stylesheet hinzu, so erhalten wir eine grau hinterlegte, horizontale Navigationsleiste — dies wird durch das Setzen der Display-Eigenschaft auf „inline“ erzielt. Der aktuelle Menüpunkt, im Quelltext mit der id „current“ gekennzeichnet, wird heller hinterlegt.
#current {
background: #979797;
}
#mainnavi {
background: #676767;
border: 1px solid #676767;
color: #fff;
list-style: none;
margin: 0;
padding: 0;
}
#mainnavi li {
border-right: 1px solid #676767;
display: inline;
padding: 0 15px;
}
Verlinkung hinzufügen
Damit hätten wir einmal den Grundstein für unsere Navigation gelegt. In einem nächsten Schritt werden wir die notwendigen Links hinzufügen und die Leiste mit Hilfe von Background-Images ein wenig stylen. Dazu erweitern wir zuerst unser HTML, indem wir die Anchor-Tags einsetzen:
<ul id=“mainnavi”>
<li><a href=“item1.html”>Item 1</a></li>
<li id=“current”>Item 2</li>
<li><a href=“item3.html”>Item 3</a></li>
<li><a href=“item4.html”>Item 4</a></li>
</ul>
Beachten Sie, dass der ausgewählte Tab aus Gründen der Usability nicht mit einem Link hinterlegt ist. Nun fügen wir den einzelnen Elementen die notwendigen Background-Images hinzu. Ein Bild werden wir dem ul-Element zuweisen, ein weiteres den Anchor-Elementen. Zusätzlich wollen wir erreichen, dass bei onMouseOver das Hintergrundbild der Tabs ausgetauscht wird.
Ein naheliegender Ansatz wäre, dafür drei unterschiedliche Bilder zu erstellen und den einzelnen Elementen zuzuweisen. Dies hätte jedoch den Nachteil, dass nicht alle Bilder beim öffnen der Seite geladen werden würden — um dies zu verhindern müssten wir einen Preloader mittels Javascript erstellen. Da wir jedoch die Navigation gänzlich ohne Scripts erstellen wollen, müssen wir auf eine andere Technik zurückgreifen.
Hover-Effekt ohne Preload
Der Trick dabei ist, alle verwendeten Hintergrundbilder in eine einzige Datei zu packen und mit der CSS-Property „background-position“ an die derzeit benötigte Position zu springen.
Wie in der Infografik oberhalb erkennbar, handelt es sich immer um das gleich Bild — lediglich der angezeigte Bereich wird verändert — dadurch werden bereits beim ersten öffnen der Seite „alle Bilder“ geladen. Das folgende Stylesheet zeigt die praktische Umsetzung dieses Konzepts.
#current {
background: url(bg_menuitem.gif)
#979797 repeat-x 0px -160px;
color: #fff;
cursor: default;
padding: 0 15px;
}
#mainnavi {
background: url(bg_menuitem.gif)
#676767 repeat-x top;
border: 1px solid #676767;
list-style: none;
margin: 0;
padding: 0;
}
#mainnavi li {
border-right: 1px solid #676767;
display: inline;
}
#mainnavi li a {
color: #fff;
padding: 0 15px;
text-decoration: none;
}
#mainnavi li a:hover {
background: url(bg_menuitem.gif)
#676767 repeat-x 0px -80px;
text-decoration: none;
}
Die Angabe des X- und Y-Wertes wurde in diesem Beispiel gleich in die Background-Deklaration miteingebunden (Diese Technik wird auch als „Shorthand“ bezeichnet) — wobei der erste Wert den Abstand vom linken Rand (in unserem Fall immer 0px) und der zweite den Abstand vom oberen Rand definiert.
Fertiges Beispiel
Zum Abschluss fügen wir alles noch einmal in eine Datei zusammen — so könnte die fertige Navigation auf Ihrer Seite nun aussehen. Wenn Sie den Quelltext genauer betrachten, werden Sie feststellen, dass die gesamte Liste in einer Zeile zusammengefasst worden ist. Dies verhindert Darstellungsschwierigkeiten in einigen Browsern, welche die Leerzeichen für die Formatierung interpretieren würden. Weitere Information zum Thema Listen und Tabs finden Sie auf „A List Apart“.
