Webdesign

CSS-Menüs mit Rollover (1)

Mit CSS kann man Menüs gestalten, die optisch anspruchsvoll sind und dennoch kurze Ladezeiten haben, weil wenige Grafiken im Spiel sind. Im ersten Teil werden wir sehen, wie man mit einer ungeordneten Liste und ein wenig CSS eine schöne Seitennavigation baut.
Teil 2 wird dann verschiedene Rollover-Effekte behandeln.

Was wird gemacht?

Insgesamt werden wir am Ende von Teil 2 vier verschiedene Beispiele bearbeitet haben. Wie die aussehen werden, können Sie sich jetzt schon mal ansehen:

Dann lassen Sie uns gleich anfangen!

Die Arbeitsgrundlage

Bevor wir an das CSS gehen können, müssen wir erstmal das XHTML-Markup erstellen (mehr Infos über XHTML gibt es im Linkbereich dieser Seite). Wir gehen von einer Seite aus, die eine klassische Navigation auf der Linken Seite hat. Diese wird als ungeordnete Liste <ul> in einem <div> mit dem Namen nav realisiert.

Das XHTML-Markup für das Menü sieht so aus:

  1. <div id="nav">
  2. <ul>
  3. <li><a href="#">Link1</a></li>
  4. <li><a href="#">Link2</a></li>
  5. <li><a href="#">Link3</a></li>
  6. <li><a href="#">Link4</a></li>
  7. <li><a href="#">Link5</a></li>
  8. <li><a href="#">Link6</a></li>
  9. </ul>
  10. </div>
  11. Code-Download: /code/tut-rollover1-01.txt

Die Linkziele sind natürlich durch korrekte Dateinamen zu ersetzen, mit dem # ist es aber für die Besprechung hier kürzer und praktischer.

Der Vollständigkeit halber ist hier das CSS für div id="nav":

  1. #nav {
  2. background:url(onepx_line.gif) 80% 0% repeat-y;
  3. position:absolute;
  4. width:20%;
  5. margin:20px 0 0 0;
  6. padding:30px 0;
  7. }
  8. Code-Download: /code/tut-rollover1-02.txt

Die Linie im Hintergrund wird durch das background-Element erzeugt. Wie das geht, erklärt das Tutorial Effekte mit background. Indem wir bei position:absolute keine Werte für top und left angeben, sorgen wir dafür, dass das <div>-Element so weit oben wie möglich und so weit links wie möglich platziert wird. Damit wird es immer direkt an den Headerbereich anschließen und immer direkt am linken Rand des <body>-Elementes sitzen.

So wie das XHTML-Markup oben steht, ist es zwar leicht lesbar, allerdings hat der Internet Explorer mit dieser Form Probleme. Er kann nämlich bei Listen mit den Zeilenumbrüchen im HTML nicht umgehen (_whitespace bug_) und macht die Abstände zwischen den einzelnen Listenpunkten zu groß. Um das zu umgehen, müssen wir das Markup ohne Zeilenumbrüche und ohne Leerzeichen schreiben. Das wird dann zwar weniger übersichtlich, muss aber sein.

  1. <div id="nav">
  2. <ul><li><a href="#">Link1</a></li><li><a href="#">Link2</a></li><li><a href="#">Link3</a></li><li><a href="#">Link4</a></li><li><a href="#">Link5</a></li><li><a href="#">Link6</a></li></ul>
  3. </div>
  4. Code-Download: /code/tut-rollover1-03.txt

Die Umbrüche innerhalb der Tags sind kein Problem (das soll einer verstehen).

Nun haben wir das Grundgerüst erstellt und können uns an die Gestaltung machen.

Menügestaltung

Um aus der Liste ein schönes Menü mit button-artigen Schaltflächen zu machen, müssen wir zunächst mal die Listenpunkte verschwinden lassen sowie die Ränder und das padding von <ul> und <li> entfernen.

  1. #nav ul {
  2. list-style:none;
  3. margin:0;
  4. padding:0;
  5. }
  6.  
  7. #nav li {
  8. margin:0;
  9. padding:0;
  10. }
  11. Code-Download: /code/tut-rollover1-04.txt

Nun wenden wir uns den Links selbst zu. Sie müssen etwas mehr Abstand und Polsterung bekommen, damit sie wie Schaltflächen aussehen. Dazu machen wir aus ihnen block-level Elemente (mit display:block). Damit beginnt jeder Link in einer neuen Zeile und margin und padding sowie border können problemlos angewandt werden.

Wir sprechen die Links zunächst nur im unbesuchten (a:link) und im besuchten Zustand (a:visited) an. Der Rollover-Effekt folgt im zweiten Teil des Tutorials.

  1. #nav a:link,
  2. #nav a:visited {
  3. display:block;
  4. margin:10px 0;
  5. padding:0.75em 0.75em 0.75em 1.5em;
  6. background-color:#DAD4A6;
  7. }
  8. Code-Download: /code/tut-rollover1-05.txt

Die Angabe margin gibt den Links oben und unten jeweils 10 Pixel Rand, links und rechts haben sie keinen Rand. Diese Schreibweise ist eine Kurzform. Wenn man zwei Werte angibt, gilt der erste für oben und unten, der zweite für rechts und links. Gibt man vier Werte an, gelten diese im Uhrzeigersinn von „12 Uhr“ ausgehend: oben, rechts, unten, links (siehe Angabe für padding). Ausgeschrieben würde es heißen:

  1. margin-top:10px;
  2. margin-bottom:10px;
  3. margin-left:0;
  4. margin-right:0;
  5. Code-Download: /code/tut-rollover1-06.txt

Man sollte sich aber angewöhnen, Kurzformen zu schreiben, weil es schneller geht und leichter handhabbar ist.

Schließlich haben wir den Links noch eine Hintergrundfarbe verpasst. Damit hat sich’s fast schon.

Allerdings nur fast. Wieder macht nämlich Internet Explorer (IE) Probleme. Der reagiert nämlich nur, wenn die Maus direkt über den Linktext fährt. Normalerweise müsste aber die komplette Linkfläche einschließlich padding maussensitiv sein. Vor allem für ein Menü wie unseres hier ist das ziemlich essentiell.

Man kann das Problem beheben, indem man den Links eine Angabe für width oder height zuweist. Mit width gibt es in anderen Browsern z.T. Darstellungsunterschiede, daher nehmen wir hier height und geben der Eigenschaft den Wert 1em, also die einfache Schriftgröße.

  1. #nav a:link, #nav a:visited {
  2. ...
  3. height:1em;
  4. }
  5. Code-Download: /code/tut-rollover1-07.txt

Dieser Wert funktioniert gut im IE. Damit nun aber die anderen Browser, die die Webstandards besser beherrschen, die Höhe der Linkelemente korrekt berechnen können (line-height + padding + border), bieten wir ihnen eine Regel an, mit der wir im Effekt die feste Höhenangabe wieder aufheben.

  1. #nav a:link, #nav a:visited {
  2. ...
  3. height:1em;
  4. }
  5.  
  6. html>body #nav a:link, #nav a:visited {
  7. height:auto;
  8. }
  9. Code-Download: /code/tut-rollover1-08.txt

Die Angabe html>body (die der IE nicht versteht) dient nur dazu, diese Regel für den IE „unsichtbar“ zu machen (mit dem Höhenwert auto funktioniert nämlich unser Trick nicht). Es handelt sich um einen sog. child selector. Mehr Infos dazu gibt es beim CSS-Guide von Westciv.

Fertig (Teil 1)

Die grundlegende Gestaltung des Menüs hätten wir damit fertig und wir können uns das “Ergebnis ansehen”/tutorials/menue-rollover/beispiel1.htm. Das Menü reagiert noch nicht auf das Überfahren mit der Maus. Denn die Rollover-Effekte folgen nun im zweiten Teil des Tutorials.

Zuletzt geändert am 15.01.2006

1Nicolas schrieb am 28. Juni 2006, 23:26 h    # 

Wunderbar. Vielen Dank. Vllt gibts noch mal was zum Design von Formularen, so wie dieses Formular in dem ich gerade schreibe..

Alles Liebe und viel Erfolg beim weiteren “webdesignen”,

Nicolas

PS: Werd mich die tage dann auch mal an eine Umstellung auf CSS-Design machen!

2TODO:) schrieb am 28. Juli 2006, 21:29 h    # 

Super! Vielen Dank. Sehr gut erklärt und klasse umgesetzt. Der Code lässt sich wunderbar umsetzen und hat mir grob gerechnet 3 Wochen Zeit gespart!!! Weiter so

TODO:)

3Artikelverzeichnis schrieb am 12. August 2007, 15:11 h    # 

Ja Zeit hab ich auch wirklich gespart und hätte es auch „leider“ viel umständlicher ohne dieses Tutorial gemacht. Danke also dafür.

4Google Pack schrieb am 5. September 2007, 02:21 h    # 

Ich auch ist wirklich praktisch das man 2 Grafiken quasi in eins packt. Danke.

5Marvin schrieb am 2. Dezember 2007, 16:33 h    # 

Eine super Sache jetzt weiß ich endlich mal wie man so coole Menüs hinbekommt.
Danke sparte mir eine Menge Suchen im Internet. :-)