Simple List Menu

Dieses Menü besteht aus einer einfachen CSS gestylten ungeordneten Liste. Es gibt einige Wege um dieses Erscheinungsbild zu erreichen. Der Gängigste ist wohl das Verwenden des Border-Attributes um die Trennlinien zu erzeugen. Hier wird es nun aber mal anders gemacht.

Ich habe hier das Prinzip von ineinander verschachtelten Tabellen aufgegriffen, die durch verschiedene Hintergrundfarben und etwas Padding ihre Borders erhalten.

Es ist aber lediglich unter Windows für die aktuellen Versionen von IE, Firefor und Opera getestet, wie dass Ganze in Mac Browsern dargestellt wird kann ich momentan leider noch nicht testen. Aber bald :)

HTML Code

Der HTML Code der hier verwendet wird ist denkbar einfach. Die UL bekommt eine ID um und die Links erhalten zusätzlich noch das Title- und Accesskey-Attribut:

<ul id="nav">
<li><a href="#" title="Item 1 - ACCESSKEY: 1" accesskey="1">Item 1</a></li>
<li><a href="#" title="Item 2 - ACCESSKEY: 2" accesskey="2">Item 2</a></li>
<li><a href="#" title="Item 3 - ACCESSKEY: 3" accesskey="3">Item 3</a></li>
<li><a href="#" title="Item 4 - ACCESSKEY: 4" accesskey="4">Item 4</a></li>
<li><a href="#" title="Item 5 - ACCESSKEY: 5" accesskey="5">Item 5</a></li>
<li><a href="#" title="Item 6 - ACCESSKEY: 6" accesskey="6">Item 6</a></li>
</ul>

CSS Code

UL

#nav {
list-style-type:none; --> Bullets entfernen
margin:0; --> äußeren Abstand entfernen
padding:0; --> inneren Abstand entfernen, wichtig für Firefox
width:200px; --> Breite des Menüs
background:#000; --> Hintergrundfarbe entspricht den Borders
border-top:1px solid #aaa; --> diese Border ist notwendig um die obere Border zu erzeugen (ist nur für FIREFOX relevant!), muss aber die Farbe des Body haben, sie wird später nicht zu sehen sein
border-bottom:1px solid #aaa; --> diese Border ist notwendig um die untere ...
}

LI

#nav li {
background:#eee; --> Hintergrundfarbe
margin:1px; --> hiermit wird nun ein Abstand von 1px bestimmt, dieser erzeugt die Borders, da der schwarze Hintergrund der UL durch diesen Abstand sichtbar wird.
}

A

#nav li a {
display:block; --> Link wird auf Block gesetzt damit die nachfolgende Höhe auch übernommen werden kann.
height:20px; --> Höhe der Links
padding:2px 10px 2px 10px; --> hiermit werden die Links ausgerichtet.
background:#eee; --> Hintergrundfarbe
color:#000; --> Schriftfarbe
text-decoration:none; --> entfernt den Unterstrich
}

Es gib natürlich auch andere wege um an dieses Ziel zu kommen. Dies ist nur ein Weiterer, den ich selber auch so noch nicht wirklich getestet und eingesetzt habe.

Mal schauen was mein Mini Mac dazu sagt, wenn er denn endlich geliefert wird. Ich ahne aber nichts Gutes.

Ich habe Screenshot der Mac Browser Safari und Camino (von Cristoph) erhalten. Entgegen meinen Erwartungen wird es auch in diesen korrekt dargestellt.
Safari
Camino

Wem es gefällt kann es hier downloaden.

Valid XHTML 1.0!