Bild-/Textmenu mit PopUp-Informationen

Cornelia Lange am 23.05.2003 – 32 Kommentare

Dieses Menu kommt ohne JavaScript aus. Die MouseOver-Effekte werden allein per CSS-Deklaration mithilfe a:hover realisiert. Im CSS wird die Position und das Layout des PopUps (hier die Klasse .showcase) festgelegt. Die Texte (auch reine Textbuttons, Bilder und List-Styles sind möglich) für das PopUp liegen in einem <span>-Element innerhalb des jeweiligen Ankers.

Beispiel ansehen

Achtung: Im Windows IE 5.5 und IE 6 gibt es einen Browser-Bug: Wenn für a:hover nur die Farbe oder nur text-decoration:none; angegeben wird, funktioniert das PopUp nicht! Wird mit der Farbe auch der Hintergrund definiert - und das sollte zur Vermeidung von Warnungen im CSS-Validator Standard sein - gibt es keine Probleme und auch ein einfaches border:none; reicht aus, um den Bug zu umgehen.

Peter-Paul Koch, der in seinem Beispiel eine andere interessante Variante des PopUps zeigt, hat getestet, dass folgende Deklarationen geeignet sind, den Bug zu vermeiden: border, display, position, overflow und background.

Noch eine Ergänzung dazu: Im a:hover muss mit den o.g. Möglichkeiten mindestens eine Variante zu a formuliert werden, sonst greift wiederum der Windows IE5.5/6-Bug!

Ach ja - fast hätte ich es vergessen ;-) :

Das lästige "flashen"* beim IE 6 (wenn in den Internetoptionen "Bei jedem Zugriff auf die Seite nach neueren Versionen suchen" oder ähnliches eingestellt ist) oder beim ersten "Durchgang" bei Mozilla und Netscape kann umgangen werden und ist in diesem Beispiel "eingebaut": Wie gewohnt werden in a:link und a:hover die entsprechenden Bilder eingebunden. Zusätzlich wird das a:hover-Bild in den umgebenden Container für den entsprechenden Navigationspunkt eingebunden. Praktisch wird das a:hover-Bild damit beim Aufbau der Seite vorausgeladen. Ausführlicher nachzulesen bei Jeffrey Zeldman, meiner Quelle für diesen "Trick".

Getestet mit: WIN IE 5.5 / IE 6, Mozilla ab 1.1, Opera 7, alle auf Win 2000 Prof. und WinXP Firebird 0.6, IE 6.0, Mozi 1.3, Opera 7.03, alle auf Win 98SE Linux: Mozilla 1.2.1 MacOSX 10.2.x: Gecko und Mozilla Browser Achtung: Der IE 5.2.2 auf MacOSX 10.2.x, Konqueror 3.1.1 (und damit wahrscheinlich auch Safari) sowie Opera 5 und 6 und NN4.X zeigen das Menü nicht korrekt an.

John Potter aus Neuseeland scheint es besser hinbekommen zu haben. Auf seiner Website lässt sich das Menü bewundern und ein Beispiel dazu gibt es ebenfalls. Getestet hat er es mit IE5/Win, IE5/Mac IE5.5/Win IE6. NN 6.2, NN 7 Moz 1.1, und Opera 7. Das Menü ist als Liste angelegt, der eigentliche Unterschied wird allerdings in seinen diversen Hacks liegen, deren Auswirkungen ich leider nicht testen kann, da ich keinen Mac zur Verfügung habe :( . Vielleicht mag sich ja jemand dieses Beispiel noch einmal mit einem Mac vornehmen und die Hacks von John Potter einbauen?

• Mit "flashen" wird hier die Übergangszeit zwischen den Bildern bezeichnet, in der nur die Hintergrundfarbe des Containers zu sehen ist.

Der Win IE 5.01 braucht eine Sonderbehandlung: Drehe an den Weitenangaben, d. h. ändere von a zu a:hover zum Beispiel von border: 1px solid #fff; zu border: 2px solid #fff; oder zu border: 0 none;. Für das mittlere Bild sieht der Code dann wie folgt aus:

#navi2 a {

display: block;

font: bold 12px Arial, Helvetica, sans-serif;

text-align: right;

text-decoration: none;

border: 1px solid #fff;

width: 125px;

height: 125px;

color: #fff;

background: #257 url(/2003/05/23/bild-textmenu-mit-css-popup-info/loewe2.jpg);

}

#navi2 a:hover {

color:#000;

background: #ccc url(/2003/05/23/bild-textmenu-mit-css-popup-info/loewe2a.jpg);

border: 0 solid #fff;

}

Eine andere Möglichkeit wären die Weitenangaben selbst (width). Um ein "Hüpfen" der Navigation zu verhindern müssen dann evtl. entsprechende Maßnahmen ergriffen werden und ohne Hack kommt man wegen der unterschiedlichen Boxen-Modelle nicht aus