Menüs mit Rollover-Effekten

Andreas Kalt am 27.11.2003 – Ein Kommentar

CSS-Menüs mit Rollover, Teil 2

Rollover Effekte für das Menü mit CSS

Was wird gemacht?

Nachdem wir im ersten Teil des Tutorials die Grundlage für das CSS-Menü angelegt haben, können wir uns nun an die verschiedenen Varianten der Rollover-Effekte machen. Hier sind die Beispieldateien, wie sie später aussehen werden.

Effekt 1: Farbiger Balken
Effekt 2: Farbiger Rahmen
Effekt 3: Wechselnde Ecke
Effekt 4: Wechselnder Punkt

Aus Teil 1 mitgebrachtes CSS

Hier ist das XHTML-Markup und der CSS-Code wie wir ihn am Ende des ersten Teils erstellt hatten:

XHTML:

<div id="nav"> 

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

</div>

CSS:

#nav a:link, #nav a:visited {

display:block;

margin:10px 0;

padding:0.75em 0.75em 0.75em 1.5em;

background-color:#DAD4A6;

height:1em;

}



html>body #nav a:link, #nav a:visited {

height:auto;

}

Diese Angabe können praktisch alle so stehen bleiben, denn wir werden nun fast ausschließlich mit der Pseudo-Klasse :hover arbeiten, die wir bisher noch nicht in unserem Stylesheet verwendet hatten.

Rollover Effekt 1: Farbiger Balken

Als erstes werden wir einen Effekt realisieren, der sehr schnell und einfach umgesetzt werden kann. Ein farbiger Balken soll rechts erscheinen, wenn man die Maus über die Links bewegt.

Dazu ergänzen wir unser Stylesheet um die Angabe a:hover und weisen dieser einen Rahmen auf der rechten Seite zu.

#nav a:hover {

border-right:7px solid #AFBCA0;

}

Ob Sie's glauben oder nicht: damit haben wir das erste Beispiel schon fertig und können es ausprobieren.

Rollover Effekt 2: Farbiger Rahmen

Ein weiterer, leicht zu gestaltender Effekt ist, den Linkflächen einen kompletten farbigen Rahmen zu verpassen. Auch das ist mit einigen wenigen Angaben im Stylesheet erledigt.

#nav a:hover {

border:2px solid #AFBCA0;

}

Diesmal nehmen wir nicht das border-right Element sondern die Kurzform border, die für alle vier Seiten eines Elements gilt. Sehen wir uns das Ergebnis! dieser Änderung an.

Die Links springen beim Rollover etwas hin und her. Das liegt daran, dass auf allen vier Seiten jeweils ein 2 Pixel breiter Rahmen hinzugefügt wird, der im Grundzustand nicht vorhanden ist. Das Problem lässt sich aber leicht beheben. Wir geben den Links im Grundzustand ebenfalls einen Rahmen, dem wir aber die Hintergrundfarbe der Links zuweisen. Dadurch bleibt er unsichtbar, ist technisch aber vorhanden und verhindert das Springen der Links. Wir ergänzen unsere Style-Definition für die Links im Grundzustand also um eine Angabe:

#nav a:link, #nav a:visited {

...
border:2px solid #DAD4A6;

}

Nun sehen wir uns das Ergebnis nochmal an. Bestens. Der Rahmen erscheint und die Links verhalten sich ruhig. Damit wäre diese Variante fertig.

Rollover Effekt 3: Wechselnde Ecke

Nun werden wir mal einen etwas anspruchsvolleren Effekt realisieren. Jeder Link soll in der rechten unteren Ecke ein Quadrat haben, dessen Farbe sich beim Überfahren mit der Maus ändert. So soll es aussehen.

Für diesen Effekt brauchen wir neben dem CSS auch zwei kleine Grafiken:

Eine für den Grundzustand und eine für den hover-Effekt.

Die erste Grafik weisen wir den Links im Grundzustand als Hintergrundbild zu:

#nav a:link, #nav a:visited {

...
background:#DAD4A6 url(/2003/11/27/menues-mit-rollover-effekten/br_corner_link.gif) bottom right no-repeat;

}

Wir ersetzen dabei das Element background-color durch background, in dem wir sowohl die Hintergrundfarbe als auch das Hintergrundbild und seine Position festlegen können. Die Grafik wird mit url(/2003/11/27/menues-mit-rollover-effekten/br_corner_link.gif) zugewiesen, in der rechten unteren Ecke des Elements platziert (bottom right) und soll nicht gekachelt werden (no-repeat). Die Hintergrundfarbe übernehmen wir aus der vorherigen background-color Regel.

Damit haben alle Links ein Quadrat in der Ecke. Nun also zum hover-Zustand. Hierfür verwenden wir die zweite Grafik. Sie soll exakt an der selben Stelle sitzen und auch alle anderen Werte für background sollen gleich bleiben. Daher schreiben wir nicht noch einmal eine komplette background-Regel, sondern nur eine für das Hintergrundbild, weil das die einzige Änderung ist.

#nav a:hover {

background-image:url(/2003/11/27/menues-mit-rollover-effekten/br_corner_hover.gif);

}

Auf diese Art machen wir es uns leicht, wenn später vielleicht Änderungen an den Grafiken oder an deren Position anstehen. So müssen wir nämlich nur an jeweils einer Stelle eine Änderung eintragen (z.B: top left anstatt bottom right) und nicht daran denken, dass die entsprechende Regel noch ein zweites Mal auftaucht.

Damit ist dieser Effekt fertig. Sehen wir ihn uns an! Sie werden vielleicht merken, dass es eine kleine Weile dauert, bis die Grafik für den hover-Zustand geladen ist. Diesem Problem kann man begegnen, indem man eine Variante der eben beschrieben Technik anwendet. Um die soll es im vierten Beispiel gehen.

(Es gibt noch eine weitere Methode, die Wartezeit zu umgehen. Näheres bei Zeldmans Daily Report).

Rollover Effekt 4: Wechselnder Punkt

Der letze Effekt in diesem Tutorial ist dem vorhergehenden sehr ähnlich. Allerdings verwenden wir nur eine Grafik, so dass sich das Problem des Nachladens durch den Browser nicht ergibt. Das Ergebnis sieht so aus.

(Wenn Sie jetzt immer noch warten müssen bis der Punkt grün ist, dann surfen Sie wahrscheinlich mit dem Internet Explorer. Der scheint nämlich die Grafik trotzdem nachzuladen obwohl er sie eigentlich schon geladen hat. Vielleicht möchten Sie sich ja einen Gefallen tun und sich einen tüchtigen Browser zulegen, z.B. Opera.Hilfe beim Umsteigen und andere nützliche Tipps gibts hier. Sie werden sich wundern, was Sie mit dem IE so alles verpasst haben.)

Nun aber wieder zurück zum CSS.

Damit sich die Farbe ändert, kombinieren wir die beiden Grafikzustände von vorher innerhalb einer einzigen Grafik. Beim hovern verschieben wir diese, so dass der "richtige" Teil sichtbar und der andere unsichtbar ist. Das klingt jetzt sicherlich komplizierter als es ist. Gehen wir's einfach an!

Unsere Grafik sieht so aus. Es sind zwei Punkte auf einer 72 Pixel hohen transparenten Fläche.

Der helle Punkt soll unser Grundzustand sein. Passen wir also die Regel für background entsprechend an:

#nav a:link, #nav a:visited {

...
background:#DAD4A6 url(/2003/11/27/menues-mit-rollover-effekten/br_corner_bothstates.gif) 90% 0% no-repeat;

}

Der Dateiname hat sich natürlich geändert und die Angaben zur Position. Wir richten die Grafik so aus, dass die horizontal auf 90% der Breite sitzt, vertikal auf 0%, also ganz oben.

Möglicherweise fragen Sie sich, wieso ich die Grafik ausgerechnet 72 Pixel hoch gemacht habe? Gute Frage. Wir müssen nämlich noch eine weitere Sache beachten: Um die Grafik genau positionieren zu können, brauchen wir die exakte Höhe des Linkelements. Und dafür müssen wir unser CSS für die beiden Grundzustände (a:link und a:visited) etwas abändern. Aus den em-Angaben zum padding müssen Pixelangaben werden. Außerdem müssen wir die Schriftgröße und die Zeilenhöhe ebenfalls in Pixeln festlegen.

#nav a:link, #nav a:visited {

...

padding:10px 10px 10px 20px;

font-size:12px;

line-height:16px;

...

}

Diese absoluten Angaben stellen einen Nachteil in puncto Zugänglichkeit (accessibilty) der Seite dar: Nutzer des Internet Explorer/Windows können damit nämlich die Schriftgröße der Seite nicht mehr ihren Bedürfnissen anpassen. Man sollte also darauf achten, eine Schriftgröße zu wählen, die groß genug ist (was immer das im Einzelfall auch heißt).

Aber zurück zum Geschäft: nun kennen wir also die exakte innere Höhe unserer Linkelemente. Sie errechnet sich aus der Zeilenhöhe (16px) plus dem padding oben und unten (jeweils 10px, also 20px). Macht zusammen 36px.

Sie ahnen es schon: 2 x 36 = 72. Die Grafik ist gerade so hoch, dass sie einmal ganz oben und einmal ganz unten ausgerichtet werden kann und dabei jeweils Zustand 1 oder Zustand 2 sichtbar ist.

Schreiben wir also das CSS für den hover-Zustand:

#nav a:hover {

background-position:90% 100%;

}

Wiederum ändern wir nur die Angabe für background-position und nicht die gesamte background-Regel (s.o.). Im Unterschied zum :link und :visited Zustand haben wir die Grafik nun in der Vertikalen ganz unten ausgerichtet.

Sehen Sie sich das fertige Menü also nochmal an!

Fertig

Damit haben wir vier verschiedene Gestaltungsmöglichkeiten für Rollover- oder hover-Effekte durchgearbeitet. Aus einer Kombination der einzelnen Techniken ergeben sich unzählige kreative Varianten. Welche Technik des Grafiktausches im einzelnen Fall angewandt werden kann, hängt u.a. von der Form und Gestaltung der Linkelemente ab. Aber auch davon, ob man die Schriftgröße absolut festlegen möchte oder nicht.

Teil 1 dieses Tutorials sowie noch weitere gibt es bei www.andreas-kalt.de/webdesign/tutorials/