Webdesign

CSS-Menüs mit Rollover (2)

Eine der grundlegendsten Einsichten beim Design von Navigationsmenüs und anderen aktiv verwendeten Elementen (user interfaces) ist, dass eine Aktion des Benutzers eine Reaktion des Systems hervorbingen sollte. Schon das Überfahren mit der Maus (rollover) ist eine solche User-Aktion.
Daher macht es Sinn, den Elementen einer Navigation auch Rückmeldungsverhalten beizubringen. Mit CSS ist das glücklicherweise sehr einfach. Der zweite Teil dieses Tutorials zeigt, wie’s geht.

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.

Aus Teil 1 mitgebracht

Zur Erinnerung ist hier nochmal das CSS für die Links wie wir es am Ende des ersten Teils erstellt hatten:

  1. #nav a:link, #nav a:visited {
  2. display:block;
  3. margin:10px 0;
  4. padding:0.75em 0.75em 0.75em 1.5em;
  5. background-color:#DAD4A6;
  6. height:1em;
  7. }
  8.  
  9. html>body #nav a:link, #nav a:visited {
  10. height:auto;
  11. }
  12. Code-Download: /code/tut-rollover2-01.txt

Diese Angabe können praktisch alle so stehen bleiben, denn wir werden nun 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 erstellen wir zunächst für den Grundzustand einen Rahmen in der gewünschten Breite. Die Farbe wird mit der Hintergrundfarbe identisch sein, so dass man den Rahmen nicht als solchen wahrnimmt. Das ist ein Trick, der in vielen Fällen unansehnliche Ergebnisse verhindert.

  1. #nav a:link, #nav a:visited {
  2. ...
  3. border-right:7px solid #DAD4A6;
  4. ...
  5. }
  6. Code-Download: /code/tut-rollover2-02.txt

Nun ergänzen wir unser Stylesheet um die Angabe a:hover und weisen dem bestehenden rechten Rahmen eine andere Farbe zu.

  1. #nav a:hover {
  2. border-color:#AFBCA0;
  3. }
  4. Code-Download: /code/tut-rollover2-03.txt

Wir geben hier nur border-color an, weil das die einzige Eingenschaft ist, die sich ändert. Wenn wir später z.B. die Rahmenbreite oder den -stil ändern möchten, müssen wir das nur in der Deklaration für a:link/a:visited tun und damit nur einmal.

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.

  1. #nav a:hover {
  2. border:2px solid #AFBCA0;
  3. }
  4. Code-Download: /code/tut-rollover2-04.txt

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:

  1. #nav a:link, #nav a:visited {
  2. ...
  3. border:2px solid #DAD4A6;
  4. }
  5. Code-Download: /code/tut-rollover2-05.txt

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 realisie
ren. 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:

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

  1. #nav a:link, #nav a:visited {
  2. display:block;
  3. margin:10px 0;
  4. padding:0.75em 0.75em 0.75em 1.5em;
  5. border:1px solid #667553;
  6. height:1em;
  7. background:#DAD4A6 url(br_corner_link.gif) bottom right no-repeat;
  8. }
  9. Code-Download: /code/tut-rollover2-06.txt

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

  1. #nav a:hover {
  2. background-image:url(br_corner_hover.gif);
  3. }
  4. Code-Download: /code/tut-rollover2-07.txt

Auf diese Art machen wir es uns leicht, wenn später Ä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 möglicherweise merken, dass es eine kleine Weile dauert, bis die Grafik für den hover-Zustand geladen ist (es sei denn, sie nutzen einen schnellen Internetzugang). 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 braucht nämlich selbst fürs Bilderverschieben Zeit, obwohl er die ganze Grafik 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 finden Sie im Linkbereich dieser Website. Sie werden sich wundern, was Sie mit dem IE so alles verpasst haben.)

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: Beispielgrafik . 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:

  1. #nav a:link, #nav a:visited {
  2. ...
  3. background:#DAD4A6 url(br_corner_bothstates.gif) 90% 0% no-repeat;
  4. }
  5. Code-Download: /code/tut-rollover2-08.txt

Der Dateiname (Zeile 03) hat sich geändert sowie 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 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 Schriftgröße und Zeilenhöhe ebenfalls in Pixeln festlegen.

  1. #nav a:link, #nav a:visited {
  2. ...
  3. padding:10px 10px 10px 20px;
  4. font-size:12px;
  5. line-height:16px;
  6. ...
  7. }
  8. Code-Download: /code/tut-rollover2-09.txt

Diese absoluten Angaben stellen einen Nachteil in puncto Barrrierefreiheit (_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.

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×36 = 72. Die Grafik ist gerade so hoch, dass sie einmal ganz oben und einmal ganz unten ausgerichtet werden kann und dabei jeweils einer ihrer beiden „Zustände“ sichtbar ist.

Beispielgrafik Beispielgrafik

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

  1. #nav a:hover {
  2. background-position:90% 100%;
  3. }
  4. Code-Download: /code/tut-rollover2-10.txt

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.

Zuletzt geändert am 09.03.2006

1flow schrieb am 15. August 2005, 13:00 h    # 

gibt es auch eine möglichkeit
einen aktiv-button einzubinden.

das beispiel hat nur den rollover effekt. ich möchte eine navigation erstellen…
... wenn ich auf einen menüpunkt klicke soll dieser z.b. in deiner navigation ist es ein punkt der die farbe ändert, dieser punkt soll jetzt eine farbe annehmen die vorher noch nicht gewählt wurde.

2Andreas schrieb am 23. September 2005, 14:32 h    # 

Also ich kann mich nur den anderen positiven Meinungen anschließen. Absolut easy erklärt, exellent nachvollziehbar, wirklich Spitze. Ich freue mich diese Seite gefunden zuhaben. Danke

3Nox schrieb am 10. Januar 2006, 01:44 h    # 

Ich gehe davon aus das dieser beitrag ein bischen spät kommt.

Wenn du einen festgesetzen Menüpunkt haben möchtest, dann musst du dir einfach eine neue Klasse erstellen:

.aktive { background:#DAD4A6 url(AKTIV_STATE.gif) 90% 0% no-repeat; }

und in deinen .html oder .php Dateien einfach in dem aktiven Link “aktiv” als Klasse eintragen:

<ul class=”nav”>[...]
<li><a class=”aktive” href=”#”></a></li>
[...]
</ul>

Gruß
Nox

4Dani schrieb am 5. April 2006, 14:45 h    # 

Hallo

Ich möchte gerne wissen, wie z.B. auf der Homepage www.yogis.ch auf der Bilderseite das mit den Rollover-Bildern funktioniert.

Arbeite mit Dreamweaver 6.0 (manchmal auch mit FrontPage) und ich finde keine Lösung. Wer kann helfen?

Dani

5Chris schrieb am 29. April 2006, 19:23 h    # 

Sehr schöne Site, ich habe eine Frage zu CSS-Links: Unter Dreamweaver gibt es für Schaltflächen verschiedene Zustände, einer (down) bewirkt, dass der Buttonzustand wenn der Button gedrückt wurde, beibehalten wird, bis ein neuer Button gedrückt wird.
Der Unterschied zu visited ist, dass der Button nicht solange als visited erkennbar ist, solange quasi der Cache des Browser nicht geleert wird. Kann ich mit CSS realisieren, dass ein Button so lange als ‘visited’ markiert bleibt, bis ein anderer Button (des gleichen Menüs) gedrückt wird? Danke, Chris.

6ak schrieb am 29. April 2006, 19:30 h    # 

Kann ich mit CSS realisieren, dass ein Button so lange als ‘visited’ markiert bleibt, bis ein anderer Button (des gleichen Menüs) gedrückt wird?

Nein, hier muss man zwischen Buttons und Links unterscheiden. Der Zustand “visited” gilt für Links (also a-Tag in HTML) und ist dann aktiv, wenn ein Link geklickt, also “besucht” wurde.

Dieser Zustand hält dann natürlich an (einmal geklickt, kann der Link ja nicht mehr “unbesucht” sein). Wie lange ein Link als “besucht” gekennzeichnet bleibt, legt der Browser fest.

7winky schrieb am 10. Juli 2006, 08:21 h    # 

@ Dani
guck halt einfach in den quelltext. er tauscht beim hover die pix via javascript.

@ Chris
was du meinst ist glaub ich die pseudoklasse :active
in verbindung mit dem a-tag. guck mal unter http://de.selfhtml.org da is zum thema alles detailliert beschrieben.
aber prinzipiell weiß ich was du meinst, und prinzipiell kriegt man sowas hin.

@ ak
wie lange ein link als “visited” gilt kann durchaus auch vom webdesigner (mit hilfe von metatags) bestimmt werden, indem man bspw. unterbindet, dass bei einem refresh auf den browser-cache gegriffen wird.

8juergen schrieb am 19. März 2007, 13:54 h    # 

Hallo super gemacht passt soweit nur wie bekomme ich es jetzt hin das wenn ich einen link anklicke nur der text in meinem inhalts container ausgetauscht wird und nicht die ganze seite neu geladen wird. Bei frameseiten einfach ueber target aber eine css seite sieht einfach besser aus smile.
gruss juergen

9ak schrieb am 19. März 2007, 14:08 h    # 

@juergen,

nur wie bekomme ich es jetzt hin das wenn ich einen link anklicke nur der text in meinem inhalts container ausgetauscht wird und nicht die ganze seite neu geladen wird.

Das geht mit CSS nicht – allerdings ist dieser Nachteil m.E. minimal gegenüber der besseren Übersichtlichkeit (und in der Regel auch dem schlankeren Code) einer CSS Site. Es war bei mir bisher nie ein Problem, das bisschen Navigation und Header Markup auch neu zu laden.

10sue-ellen schrieb am 25. Mai 2007, 19:26 h    # 

hallo, ich bin glaub ich nicht mehr so aktuell mit meiner Frage. Aber ich versuchs doch einfach mal. Kann man die Navigation ausbauen, damit beim Mouseover bei jeder Navigation der Punkt eine andere Farbe bekommt, oder der Balken in einer anderen Farbe erscheint, und das auf der gleichen Seite ohne zu klicken. Und das alles mit CSS? Es wäre super wenn ich darauf eine Antwort bekommen würde. Danke

11Andreas Kalt schrieb am 25. Mai 2007, 20:03 h    # 

Kann man die Navigation ausbauen, damit beim Mouseover bei jeder Navigation der Punkt eine andere Farbe bekommt, oder der Balken in einer anderen Farbe erscheint,

Das geht, allerdings für die beiden Teilfragen auf unterschiedliche Art:

(1) Der Balken wird mit CSS “gezeichnet”. Wenn er eine andere Farbe haben soll, ändert man einfach die Farbe in der Regel für “border”

(2) Der Punkt ist eine Grafik, die als Hintergrundbild verwendet wird. Soll er eine andere Farbe haben, muss man eine andere Grafik erstellen oder die bestehende entsprechendn ändern.

12sue-ellen schrieb am 28. Mai 2007, 17:46 h    # 

Danke für Ihre schnelle Antwort. Ich möchte aber, dass bei der Berührung mit der Maus jeder Link eine andere Farbe bekommt. Kann ich den a:link, a:visited und a:hover im html überschreiben für die einzelnen Links, und jedem eine andere Farbe geben?

13Andreas Kalt schrieb am 28. Mai 2007, 19:23 h    # 

sue-elllen, ich weiß nicht, ob ich das Problem richtig verstehe, aber ich habe gerade ein neues Tutorial fertig gestellt, das Dir evtl. weiter helfen könnte.

14sue-ellen schrieb am 29. Mai 2007, 18:44 h    # 

ja genau das meine ich. Aber wenn man mit der Maus über den Link “Sonnencreme” fährt, hat dieser eine Farbe (nicht die “Home”-Farbe), und der Link “Shampoo” hat dann auch wieder eine andere Farbe, wenn man mit der Maus über den Link fährt. . .
Also bei allen 4 Links wird eine andere Farbe hinterlegt. Kann ich das mit Hover lösen? Sorry für die Umstände. Danke

15Andreas Kalt schrieb am 29. Mai 2007, 19:17 h    # 

sue-ellen – Du musst im Grunde die beiden Techniken kombinieren: :hover und die gezielte Ansprache jedes einzelnen Links durch die Kontext-Selektoren.

z.B.

#home #navHome a:hover {
background-color:#fff;
}

#sonnencreme #navSonnencreme a:hover {
background-color:#ccc;
}

usw.

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

Danke für die Vorsetzung des Tutorials, hat mich um einiges nach Vorne gebracht in Sachen Design.

17Google Pack schrieb am 5. September 2007, 02:22 h    # 

Eins der besten Beschreibungen die ich jeh im Web gefunden habe.

18Peter Pan schrieb am 25. November 2007, 11:59 h    # 

wirklich hervorragende Anleitung! Hut ab!

werde einige Beispiele mit meinen Schülern (10.Jahrgang) durchspielen, dank der guten didaktischen Aufbereitung ein Kinderspiel, oder? ;-))

19Chris schrieb am 11. Januar 2008, 15:34 h    # 

Das Tutorial ist klasse, aber ich habe immer noch ein Problem:
Bei mir scrollt das Menü mit und bleibt nicht fest stehen. Wie kann ich das ändern? Sodass ich den Scrollbalken verschieben kann, aber das Menü an der gleichen Stelle bleibt.

20Andreas Kalt schrieb am 11. Januar 2008, 17:20 h    # 

Das kann man mit der CSS Eigenschaft position: fixed; erreichen.

Also z.B.

div#nav { position: fixed; }

Allerdings unterstützt IE6 und niedriger das nicht, so dass sich dort das Menü nach wie vor mitbewegt. Wie es im IE7 ist, weiß ich nicht auswändig.

21Chris schrieb am 15. Januar 2008, 16:52 h    # 

Okay, vielen Dank. Das hat mir sehr geholfen.
Eine ähnliche Frage hätte ich allerdings noch.
Ich hab das Layout meiner Website mit CSS gestaltet . Der Text scrollt jetzt aber über die ganze Seite. Auch über das Layout am Kopf der Seite. Wie schaff ich es, den Text so zu fixieren, dass er an einer bestimmten Stelle bleibt?
Ich würde mich sehr über eine Antwort freuen..

22Willi schrieb am 28. Januar 2008, 22:06 h    # 

Hallo lieber Herr Kalt,

ich wollte an dieser stelle nun mal Danke sagen, dieses und einige andere Beispiele haben mir sehr in der Entwicklung meiner Seite geholfen.

Besonders mit den Rollover-Menüs hatte ich immer so meine Probleme. Dafür wollte ich einfach mal ganz laut Danke sagen!

Viele Grüße Willi

23DocD schrieb am 24. Februar 2008, 09:34 h    # 

Supi erklärt, danke auch von mir nochmal :)