Stilmittel mit CSS
Die Navigationslisten, in denen die Navigationsebenen oder andere Navigationselemente enthalten sind, können sehr variantenreich mit CSS bearbeitet werden. Auch Effekte, die man eigentlich nur mit JavaScript für denkbar hält sind mit CSS möglich und die Barrierefreiheit selbst bleibt dadurch erhalten.
Als Basis für die folgende Beispiele dient diese grundlegende Navigationsliste ohne Innen- und Außenabständen ( * { margin:0; padding:0; }; ). Dies soll eine klassische Navigation mit zwei Ebenen darstellen.
Vertikale Navigation
Da die Liste bereits eine vertikale Ausrichtung besitzt, ist das Anlegen einer vertikalen Navigation mit CSS einfacher, als eine Horizontale. Zunächst einmal gibt man der Liste eine Breite von 20 Prozent. Aufpassen muss man bei den Listen mit der Vererbung der Eigenschaften, da in diesem Beispiel die verschachtelte Liste von der übergeordneten Liste die Breite vererbt. Deswegen bekommt der Selektor ul ul den Wert 95 Prozent für die Eigenschaft width und 5 Prozent für margin-left, damit auch gleichzeitig die zweite Navigationsebene gesondert hervorgehoben wird. Die Selektoren li und li li (Auch die Listenelemente sind von der Vererbung betroffen) bekommt eine Regel für Innen- und Außenabstände und Farben. Damit die störenden Listenpunkte entfallen, muss man in dem ul - Selektor die Deklaration list-style:none; angeben. Folglich sieht die vertikale Navigation mit Farben erstmal so aus.
* {
margin:0;
padding:0;
}
ul {
width:20%;
list-style:none;
font-weight:bold;
}
ul ul {
width:95%;
margin-left:5%;
}
li {
background-color:#000099;
color:inherit;
}
li li {
background-color:#0066CC;
color:inherit;
}
a {
color:#0099FF;
background-color:transparent;
text-decoration:none;
}
Damit den Linktexten Abständen zufügen und Rollover-Effekte anlegen kann, muss man das Inline-Element a in ein Blockelement umwandeln. Dazu fügt man einfach die Deklaration display:block; in den a - Selektor ein, wodurch sich das Link-Element sich über das ganze li-Element ausbreiten kann. Dann kann man mittels padding die Innenabstände angeben.
a {
display:block;
color:#0099FF;
background-color:transparent;
padding:5px;
}
Die display - Deklaration ist dort sehr wichtig, da sonst der Link nur gehen würde wenn man den Text anklickt. Dadurch ist auch das "nähere Umfeld" des Links klickbar.
Um nun einen simplen Rollover-Effekt zu ermöglichen, wie das Wechseln der Hintergrundfarbe, genügt folgende Regel mit der hover - Pseudoklasse. Damit auch beim "Durchtabben" die aktuelle Auswahl hervorgehoben wird, sollte man auch die focus-Pseudoklasse mit einbeziehen.
a:hover, a:focus{
background-color:#006633;
color:#003333;
}
Damit nun die Links der zweiten Ebene eine andere Hintergrundfarbe bekommen genügt folgende Regel.
li li a:hover, li li a:focus {
background-color:#009933;
}
Möchte man nun die einzelnen Links besser hervorgehoben, werden nun Außenabstände zwischen den Listenelmenten anleget durch die Regel.
li {
background-color:#000099;
color:inherit;
margin:3px 0;
}
Das Endergebnis der vertikalen Navigation sieht dann so aus.
Horizontale Navigation
Damit die Links in einer Liste nebeneinander angeordnet werden, muss das Blockelement li in ein Inlineelement umgewandelt werden. Dafür gibt man der display - Eigenschaft den Wert inline. Um dieses Beispiel zu vereinfachen wird die zweite, verschachtelte Liste entfernt. Die vorläufige Version der horizontalen Navigation mit Farben sieht dann so aus.
* {
margin:0;
padding:0;
}
ul {
list-style:none;
font-weight:bold;
background-color:#CC9966;
color:#FFFFFF;
}
li {
display:inline;
background-color:#000099;
color:inherit;
}
a {
color:#0099FF;
background-color:transparent;
text-decoration:none;
}
a:hover, a:focus {
background-color:#006633;
color:#003333;
}
Auch hier sollte man den Links Innen- beziehungsweise Außenabstände geben, damit sie besser wahrnehmbar ist. Zu allererst muss man in den li - Elementen mittels padding Platz nach oben und nach unten für diese Abstände schaffen, da ansonsten die a - Elemente die Liste überlagern. (Man kann auch diesen Effekt gestalterisch ausnutzen wenn man mag). Dem ul - Element muss man eine Zeilenhöhe mitgeben, die dem padding - Wert und der Schrifthöhe (da keine deklariert ist, ist font-size in diesem Beispiel 1em) insgesamt entspricht, in diesem Fall 2em. Dadurch wird garantiert, dass die Links lesbar bleiben, wenn durch einem kleinem Fenster die Navigationszeile umbricht. Gerne kann line-height auch größer sein. Die horizontale Navigation mit padding sieht dann folgendermaßen aus.
ul {
[...]
line-height:2em
}
li {
[...]
padding:1em;
}
a
{
[...]
padding:1em;
}
Um den fokussierten Link hervorzuheben kann man wiederrum die Farben mittels den Pseudoklassen verändern, aber in diesem Beispiel wird nun ein Rand um den Linktext anlegt. Dafür verwendet man folgende Regel.
a:hover, a:focus {
margin:.2em;
border:.1em dotted red;
padding:.2em;
}
Hervorzuheben ist, dass die Werte in dieser Regel zusammen den Wert des padding des a-Elements ergeben sollten, da das Boxmodell beachtet werden muss. Ohne die Anpassung der Abstände an den neuen Rand käme es zu unschönen Überlagerungen beim Fokussieren. Hier nun die horizontale Navigation mit Rändern.
Komplexere Rollover-Effekte
In Kombination von Image-Replacementverfahren kann man für die Navigation Effekte erzielen, die den Pendants in JavaScript in nichts nachstehen und mehr im Sinne der Barrierefreiheit sind. Ein weiterer Vorteil ist, dass diese Variante auch beim deaktivertem JavaScript funktioniert.
Diese Navigationsliste dient nun als folgendes Beispiel. Wie man sieht ist der Text nochmals mit einem span - Element, was für IR notwendig ist. Auch bekommt jeder Link eine Id, damit diese direkt selektiert werden können.
<ul>
<li><a href="#" id="start"><span>Start</span></a></li>
<li><a href="#" id="erstens"><span>Erstens</span></a></li>
<li><a href="#" id="zweitens"><span>Zweitens</span></a></li>
</ul>
Ausgangen wird in diesem Beispiel, dass die Buttons 200 Pixel mal 60 Pixel groß sein sollen. Deshalb kommen die Elemente ul, li und a die entsprechenden Maße und das a - Element wird in ein Blockelement umgewandelt. Das span -Element wird ausgeblendet.
* {
margin:0;
padding:0;
}
ul {
list-style:none;
width:200px;
}
li {
width:200px;
height:60px;
}
a {
display:block;
width:200px;
height:60px;
}
span {
display:block;
width:200px;
position:absolute;
left:-5000px;
}
Bild von Button im nichtfokussiertem und fokusiertem Zustand
Nun wird jedem einzelnem Link ein Hintergrundbild als Button gegeben. Das Bild aber ist 200 Pixel mal 120 Pixel hoch (doppelt so hoch wie der eigentliche Button) und hat in der unteren Hälfte den Button im fokussierten Zustand, siehe oberes Bild. Im Quelltext sieht das dann so aus.
#start {
background-image:url(img/start.jpg);
}
#erstens {
background-image:url(img/erstens.jpg);
}
#zweitens {
background-image:url(img/zweitens.jpg);
}
Da ja die Linkelemente nur 60 Pixel hoch sind, wird der untere Teil ausgeblendet. Um nun beim fokusieren den unteren Teil ein- und den oberen auszublenden genügt folgende Regel.
a:hover, a:focus {
background-position:0 -60px;
}
Hier kann man das Endergebnis einer Navigation mit IR sehen.
Interessante Links zu CSS in Listen