Zum Aufzählen viel zu schade finden Listen in der Navigation ihre wirkliche Bestimmung. Kein Wunder, sie sind semantisch korrekt, flexibel und freundlich zu älteren Browsern. Ein bisschen CSS bringt die Liste in jede gewünschte Form und Position.
Eine Liste, viele Möglichkeiten: Der gleiche Listen-Quelltext bedient die horizontale und vertikale Menü-Version, nur das zugehörige Stylesheet wird ausgetauscht. Listeneigene Funktionen wie Aufzählungszeichen oder vorformatierte Einschübe und Zeilenabstände schalten wir mit CSS ab.
Ein Frage des Stylings: Liste horizontal –
– oder vertikal, der HTML-Quelltext ist identisch
Live Demo im neuen Fenster: Menüliste horizontal und vertikal
Werfen wir zunächst einen Blick auf die ungeordnete HTML-Liste:
<div id="menu">
<ul>
<li><a href="#">Punkt eins</a></li>
<li><a href="#">zweiter Eintrag</a></li>
<li><a href="#">dritter Menüpunkt</a></li>
<li><a href="#">vierte Kategorie</a></li>
<li><a href="#">Auswahl fünf</a></li>
</ul>
</div>
Eine <ul>, eine <div> und eine id werkeln zusammen im Innern der Listen-Navigation und reichen für die Funktion bereits völlig aus. Den schönen Schein liefert ein Stylesheet – hier für die horizontale Ausgabe:
#menu ul {
font-family: arial, helvetica, sans-serif;
list-style-type: none;
background-color: #aaa;
float: left;
margin: 0;
padding: 0;
width: 100%;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
border-right: 1px solid #bfbfbf;
border-left: 1px solid #aaa; }
#menu ul li { display: inline; }
Schriftart und Schriftgröße der Navigation geben wir gleich für die gesamte <ul> an. Über CSS-Vererbung gelten sie damit für alle Elemente innerhalb der <ul>. Die <ul>-typischen Aufzählungszeichen können wir in der Navigation nicht gebrauchen, also werden sie abgeschaltet, mit list-style-type: none.
Die Hintergrundfarbe background-color: #aaa bestimmt den Farbton für die ganze Liste. Weil wir die Links gleich noch extra-stylen, sieht man die Hintergrundfarbe nur rechts, bis zum Rand der Liste. float: left und die folgenden display: inline für die <li> und float: left für Anchor-Element <a> sind die richtigen CSS-Anweisungen, für eine liegende Position der Liste.
Ab sofort navigieren wir mit Kapitälchen (text-transform: uppercase) und rücken die Buchstaben mit letter-spacing: 1px etwas auseinander. Ans linke und rechte Ende der Leiste malen wir uns mit border-left und border-right noch winzige, kaum sichtbare Rahmen-Akzente.
#menu ul li a {
background-color: #bfbfbf;
border-right: 1px solid #fff;
color: #000;
float: left;
padding: 0.2em 1em;
text-decoration: none; }
#menu ul li a:hover {
background-color: #fafafa;
color: #2a2a2a; }
Die Hintergrundfarbe für Links #bfbfbf setzt diese dezent vom Listenhintergrund ab. Ein weißer Rahmen rechts neben jedem Link (border-right: 1px solid #fff;) sorgt optisch für eine noch deutlichere Abgrenzung. Mit dem noch ausstehenden float: left; für Links besiegeln wir die gewünschte horizontale Listenposition.
Für den hover-Zustand wechseln wir die Hintergrundfarbe erneut, zu einem Hauch von Grau (#fafafa) und passen im gleichen Zuge noch die Schriftfarbe an (#2a2a2a) – Fertig.
Das gleiche graue Farbschema wollen wir auch für die vertikale Version des Menüs verwenden. Auch diese beruht auf dem bekannten HTML-Quelltext für die Liste. Die Stylesheets unterscheiden sich im Detail.
#menu { width: 140px; }
#menu ul {
font-family: arial, helvetica, sans-serif;
list-style-type: none;
margin: 0; padding: 0;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px; }
#menu ul li a {
background-color: #bfbfbf;
border-bottom: 1px solid #fff;
color: #000;
display: block;
width: 100%;
padding: 3px 5px;
text-decoration: none; }
#menu ul li a:hover {
background-color: #fafafa;
color: #2a2a2a; }
Hier finden wir die Begründung für die zusätzliche div id=“menu“ um die Liste herum. Browser haben unterschiedliche Meinungen darüber wie sie mit Listenaufzählungszeichen verfahren sollen. Selbst wenn diese mit list-style-type: none abgeschaltet, also unsichtbar sind, halten einige Browser trotzdem den Platz für die nicht gezeigten Aufzählungszeichen frei. Legen wir die <ul> nun in eine übergeordnete <div>, können wir für diese eine Weite angeben (width: 140px;), die dann durch Vererbung für alle Elemente in der Liste und auch für den hover-Zustand gilt.
Besondere Maßnahmen um die Lage des Menüs zu beeinflussen sind hier nicht notwendig. Wir bestimmen analog wie oben Schriftfamilie, Schriftgröße und gespreizte Kapitälchen für die ganze Liste.
Den Links nehmen wir ihre störenden Link-Unterstreichungen (text-decoration: none;), greifen zum gleichen Grau für den Hintergrund (background-color: #bfbfbf;) und malen weiße Trennstriche unter die Links (border-bottom: 1px solid #fff;).
Dem Trick mit display: block und width: 100% die Schalterfläche zu maximieren sind wir schon im Spaß mit Listen – Teil I begegnet. Auf dem heiklen Feld der Listen-Formatierung erweist er sich als unverzichtbar um Sonderwege der notorischen IE-Browser abzuschneiden.
Die CSS-Formatierung der überhoverten Links haben wir eins zu eins aus dem Stylesheet für die horizontale Version kopiert.
Unser Modell ist inspiriert von der Rollover List von Russ Weakley.
Erstveröffentlichung 01.03.2006
