Was wollen wir mit diesem Rezept erreichen? Wir wollen eine hübsche, horizontale Navigation mit dem Sliding Doors Effekt; das mit möglichst wenig Markup und dazu noch so flexibel wie möglich. So soll es dann bei uns nachher aussehen:

Das Ergebnis

Und hier noch die Live-Ansicht der HTML-Seite.

Fangen wir mit dem Markup an. Der HTML-Teil für unsere Navigation ist nur eine Unordered List:

<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>&Uuml;ber mich</a></li>
<li><a href=”#”>Bilder</a></li>
<li><a href=”#”>Kontakt</a></li>
<li><a href=”#”>Extra langer Link</a></li>
</ul>

Das war schon der gesamte HTML-Teil. Beginnen wir nun mit dem Styling per CSS. Fangen wir mit dem ul-Tag an:

ul {
list-style: none;
width: auto;
height: auto;
overflow: hidden;
}

Das overflow: hidden; dient dazu, den Float der Listenelement ohne zusätzliches Markup wieder aufzulösen. Denn die einzelnen Listenelemente werden wir mittels float: left nebeneinander setzen:

li {
float: left;
width: auto;
margin-right: 2px;
background: url(images/right.jpg) no-repeat right;
}

Der Hintergrund ist die rechte Tür unserer Sliding Door:

Nun brauchen wir noch die linke Kante unserer Sliding Door, dann sind wir auch schon fertig:

li a {
width: auto;
height: 27px;
line-height: 27px;
padding: 0px 20px;
background: url(images/left) no-repeat left;
color: # 333;
}

Das Bild für die linke Tür:

Wie es funktioniert:

Wir haben dem Listenelement ein Hintergrundbild mit ausreichender Breite und einem no-repeat Befehl gegeben. Außerdem soll das Bild rechts im Listenelement angeschlagen werden. Verbreitert sich das Listenfeld auf Grund eines längeren Link-Textes so wird einfach mehr vom Hintergrundbild sichtbar.

Der Hintergrund des eigentlichen Links ist das linke Bild der Sliding Door und links angeschlagen. Es liegt über dem Hintergrund des Listenelements und verdeckt diesen. Dadurch wandert dieses Ende immer mit der Größe des Feldes mit. Durch den Befehl des paddings kann man zusätzlich den Innenabstand verändern und den Linktext zentrieren.

Alle Zutaten zu diesem Rezept herunterladen

Ich wollte eine horizontale Navigation erstellen, die zentriert im Head der Seite dargestellt werden sollte. Semantisch korrekt natürlich als eine unordered list. Hier das reine HTML:

<div id=”navbar”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

Das wurde dann mit folgendem CSS gestylt:

#nav {
width: 100%;
height: 30px;
position: relative;
overflow: hidden;
}

Nun stylen wir die eigentliche Navigation:

#nav ul {
position: relative;
list-style: none;
left: 50%;
}

#nav ul li {
position: relative;
right: 50%;
float: left;
}

Das wars schon. Die einzelnen Navigationspunkte werden jetzt alle nebeneinander stehen und gleichzeitig im Container “nav” zentriert sein.