Dieses Menü 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.
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!
Das lästige "flashen"* beim IE 6 (wenn z.B. in den
Internetoptionen "Bei jedem Zugriff auf die Seite nach neueren Versionen suchen" eingestellt ist) oder beim ersten "Durchgang" in Mozilla und Netscape kann umgangen werden und ist
in diesem Beispiel "eingebaut": Wie gewohnt werden in a:link und a:hover die
entsprechenden Bilder per css geladen. 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.
