Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Styling der Navigation als ungeordnete Liste

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Styling der Navigation als ungeordnete Liste

Betrachtet man die Navigation einer Website — egal ob vertikal oder horizontal — strukturell, dann ist das Ganze nichts anderes, als ein Liste von Links. Deshalb sollte diese im HTML-Markup auch als solche ausgezeichnet werden. Oft werden diese jedoch durch endlose Strings aufeinanderfolger Links oder eingerahmt in DIVs dargestellt. Begründet wird das meist lapidar damit, dass man keine Aufzählungszeichen vor den Links haben möchte. Dieser Beitrag soll zeigen, wie man mit einigen einfachen CSS-Anweisungen eine als Liste ausgezeichnete Navigation umsetzen kann.

Ausgangssituation

Gehen wir von dem einfachen folgenden Beispiel aus:

Es handelt sich hierbei also um eine Navigation mit vier Punkten. Der aktive Menüpunkt wird im Markup auf der jeweiligen Seite durch die CSS-Klasse "aktiv" gekennzeichnet.

Styling mit CSS

Zuächst wird für alle Browser eine einheitliche Ausgangssituation hergestellt, indem Innen- und Außenabstand auf 0 gesetzt werden. Mit list-style: none; werden zudem alle Aufzählungspunkte der Liste entfernt.

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

Alle anderen Stile und Funktionalit�ten werden nun den Links hinzugefügt. Zu Beginn bringen wir ein wenig Farbe ins Spiel, indem Hintergrundfarbe und die Farbe der Links angepasst werden.

ul#navigation a {
background-color: #005;
color: #fff;
}

Wie bereits gesagt, kann über die CSS-Klasse "aktiv" ein separates Styling für den Link zu aktuellen Seite eingeführt werden. Der Einfachheit halber beschränken wir uns hier lediglich auf eine andere Hintergrundfarbe.

ul#navigation a.aktiv {
background-color: #eef;
color: #005;
}

Zu einer ordentlichen Navigation gehören zudem Hover-Effekte. Die setzen wir schnell und einfach mit der Pseudo-Klasse :hover um.

ul#navigation a:hover {
background-color: #009;
}

Vertikale Navigation

Jetzt ist entscheidend, wie die Navigation in die Seite eingebunden wird. Zum Einen besteht die Möglichkeit diese vertikal als Sidebar neben dem Inhalt zu platzieren. Zum Anderen kann die Navigation als horizontale Version am Seitenkopf platziert werden.

Beginnen wir mit der vertikalen Version. Hierfür muss zunächst die Breite der Liste eingeschränkt werden (width: 20%;).

ul#navigation {
list-style: none;
margin: 0;
padding: 0;
width: 20%;
}

Natürlich möchten wir, dass der Link die gesamte Breite der Liste ein nimmt. Die display-Eigenschaft wird dafür auf block gesetzt.

ul#navigation a {
background-color: #005;
color: #fff;
display: block;
padding: 5px;
text-decoration: none;
width: 100%;
}

Hier stößt man allerdings auf die ersten Probleme bezüglich der Browserkompatibilität. Denn der Internet Explorer unter Windows interpretiert diese Eigenschaft falsch, sodass es notwendig wird, die Breite des Blocks explizit mit width: 100%; anzugeben. Das wiederrum führt zu Problemen mit Netscape, Mozilla und IE/Mac. Um diese zu umgehen, verwenden wir den Child-Selektor und setzen die Breite des Links auf auto. Diese Anweisung wird von IE/Win ignoriert, da dieser Child-Selektoren nicht interpretieren kann.


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

Horiziontale Navigation

Auch eine horizontale Anordnung der Navigation ist relativ einfach umzusetzen. Das Floating der Listenelemente wird dafür auf left gesetzt.

ul#navigation li {
float: left;
}

Dabei ist allerdings darauf zu achten, dass die Breite eines Links nicht mit 100% anzugeben ist. Der Internet Explorer interpretiert das wieder falsch. Die Links werden dann über die gesamte Breite der Seite dargestellt. Es genügt die Angabe width: auto; für alle Browser.

ul#navigation a {
background-color: #005;
color: #fff;
display: block;
padding: 5px;
text-decoration: none;
width: auto;
}

Zusammenfassung

Zusammenfassend kann gesagt werden, dass durch das Zusammenspiel von HTML und CSS genügend Möglichkeiten bestehen, die Navigation als semantisch korrekte Liste auszuzeichnen, ohne das dabei Einschränkungen bezüglich des Designs entstehen. Es bestehen weitaus mehr Möglichkeiten, als das hier angeführte Beispiel zeigt.

Weiterführende Links

Kommentare

Heiko
am 22.12.2005 - 12:02

Mit einer als Liste strukturierten Navigation, ist es außerdem für den Screenreader(user) möglich, die Navigation ( oder einzelne Elemente dieser ) mit einem Tastendruck zu überspringen bzw. schnell zu den einzelnen Punkten zu gelangen. Klasse Übersicht!

Permanenter Link

Martin Labuschin
am 22.12.2005 - 16:28

"Wolfgang Bartelme" muss es heißen (in den weiterführenden Links)

Permanenter Link

Ester
am 22.12.2005 - 17:43

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

Im Opera 8.5, Firefox 1 und 1.5 wird das nicht unbedingt benötigt. Welche Mozilla Versionen sind den da betroffen?

Permanenter Link

Markus Stange
am 23.12.2005 - 12:35

Anstatt von width:100%; könntest du auch height:1%; schreiben. Das löst auch das IE-Klickblock-Problem, und es wird von gescheiten Browsern ignoriert, weil die ul als Elternelement ja (normalerweise) keine Höhe hat (und dann werden prozentuale Höhenangaben als width:auto; interpretiert). Dann wäre also auch kein Child-Selektor-Hack mehr notwendig.

Schöner Artikel. :)

Permanenter Link

auto navigation
am 06.04.2007 - 14:33

>>Anstatt von width:100%; könntest >>du auch height:1%; schreiben. Das >>löst auch das >>IE-Klickblock-Problem, und es >>wird von gescheiten Browsern >>ignoriert, weil die ul als >>Elternelement ja (normalerweise) >>keine Höhe hat (und dann werden >>prozentuale Höhenangaben als >>width:auto; interpretiert).

könnte da nochmal jemand näher darauf eingehen, irgendwie scheint mir eine Krücke nicht adäquat für Webstandards.

[Anm. d. Red.: Link entfernt, holt euch euren PageRank gefälligst woanders]

Permanenter Link

Die Kommentare sind geschlossen.