CSS Menüs: Listen (li)
Menüs sind ein elementarer Bestandteil jeder Webseite. Sie sollten mit viel Bedacht gestaltet werden, um den Anwender so einfach wie möglich, die Struktur der Seite transparent machen.
Größenangaben immer in em der rem angeben, nicht in px (Pixel) und schon gar nicht in pt (Point). Außer bei border und damit zusammenhängenden Angaben (z.B. padding); da ist px angemessen.
Standard Menü
Die meisten Webseiten, meine eingeschlossen, verwenden für ein senkrecht
angeordnetes Menü normale Links, die jeweils durch einen Zeilenumbruch <br />
untereinander zu stehen kommen (wegen der inline Eigenschaft des <a> Elements).
<div id="standardmenue"> <a href="#">Seite 1</a><br /> <a href="#">Seite 2</a><br /> <a href="#">Seite 3</a><br /> <a href="#">Seite 4</a> </div>
Menü mit block-formatierten Links
Etwas eleganter und mit dem Vorteil, dass sich der Mouseover-Effekt auf die gesamte Zeile auswirkt, ist es, die Links mit display: block zu formatieren. Dadurch werden sie automatisch unter einander angeordnet.
<div id="blockmenue"> <a href="#">Seite 1</a> <a href="#">Seite 2</a> <a href="#">Seite 3</a> <a href="#">Seite 4</a> </div>
Dazu das Stylesheet, ohne die Formatierung des umgebenden Kastens.
#blockmenue a {
display: block;
}
Menü als Liste von Links
Noch eleganter und auch im Sinne eines semantisch korrekten Markups ist es, die
Navigation als das zu kennzeichnen, was sie ist: als eine Liste von Links.
Die standardmäßigen typischen runden
Listen-Markierungen
kann man mit "list-style-type:none" unterbinden oder bei Bedarf durch ein
beliebiges Bild ersetzen.
<ul id="listenmenue"> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul>
Das dazu gehörende Stylesheet sieht dann so aus (a {display:block} ist nicht notwendig, da li schon ein Block-Element ist:
#listenmenue {
list-style-type: none;
}
Horizontales Listen-Menü
Auf diese Weise kann man dann auch, ohne den HTML-Code zu verändern, das Menü horizontal anordnen. Das geschieht, indem man die Listen-Items mit display: inline neben einander stellt.
<ul id="horizmenue"> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul>
Die neue Anordnung geschieht ausschließlich im Stylesheet. Um die typischen Listen-Markierungen braucht man sich nicht zu kümmern, sie erscheinen in inline deklarierten Listen nicht.
#horizmenue {
width:33em;
}
#horizmenue li {
display: inline;
padding: 0em 0.8em;
}
#horizmenue a {
padding: 0.1em 0.8em 0.8em 0.1em;
}
Horizontales Menü mit Karteireitern (Tabs)
Jetzt sind es nur noch einige CSS-Angaben, um daraus ein Tab-Menü zu erstellen.
<ul id="tabmenue"> <li><a id="aktuell" href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul>
Das Stylesheet dazu sieht einschließlich der Farbangaben folgendermaßen aus:
#tabmenue {
padding: 2px;
border-bottom: 2px solid #222;
}
#tabmenue li {
display: inline;
}
#tabmenue li a {
padding: 2px 10px;
margin-left: 0.5em;;
border: 2px solid #777;
border-bottom: 0px;
text-decoration: none;
background-color:#F7FCBD;
}
#tabmenue li a#aktuell {
padding-bottom:4px;
border-bottom: 2px solid #fc0;
}
Weitere Beispiele
Listamatic - Eine Liste, viele Optionen
zeigt die vielfältigen Möglichkeiten von CSS. Mit Demos von
von Eric Meyer, ProjectSeven, SimpleBits, Jeffrey Zeldman und anderen.
Simplified CSS - Dan Cederholm
Eine Legende.
Tabs mit Grafiken statt Text, die sich beim Überfahren mit der Maus ändern,
haben normalerweise den Nachteil, dass die Bilder beim Hovern erst geladen werden
müssen, der Effekt sich also entsprechend verzögert. Eine raffinierte Methode
das zu umgehen hat Dan Cederholm nach einem Trick von
Pixy realisiert.
Völlig ohne JavaScript und auch für reine Textbrowser geeignet.
Impressum 
Datenschutz