Sliding doors Effekt mit CSS

Wer kennt sie nicht, diese hübschen Navigationen, bei denen die einzelnen Navigationspunkte wie Tabs aussehen? Der Trend für diese Art des horizontalen Navigationsdesigns mit dem vielsagenden Titel “Sliding Doors” hat sich in den letzten Jahren immer mehr im Webdesign durchgesetzt. Aber wie bekommt man diesen Effekt ohne viel Markup hin? Mit Hilfe dieses kleinen Rezeptes ist das kein Problem mehr.

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

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:

right

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: left

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

Tags: , , ,

4 Kommentare for “Sliding doors Effekt mit CSS”

  1. 24. November 2009, 21:22
    operator sagt:

    Hey,
    kann man die Navi auch in action sehen ohne sie runterzuladen? Wäre toll wenn da ein “großer” Link oben erscheint: HIER DAS ERGEBNIS (oder so!) Dann kann man schnell sehen ob es sich lohnt den Artikel genauer zu betrachten. ;-) Alles für die Usability!

  2. 24. November 2009, 21:23
    operator sagt:

    wow meine Kommentare erscheinen sofort :-) Technik die begeistert…

  3. 24. November 2009, 23:54
    Dietmar sagt:

    Aber auch nur, weil Du so brav bist :) . Besorg Dir mal einen Avatar bei gravatar.com ;)

  4. 15. Januar 2010, 08:40
    Webdesign aus Rosenheim sagt:

    Danke für den guten Artikel!
    Ist sehr nützlich!

Kommentar hinterlassen




CommentLuv Enabled