Menü mit wechselnden Hintergrundbildern sowie Textbezeichnungen für die Links und zusätzlichen PopUp-Informationen ohne Einsatz von JavaScript.. 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 -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! Ach ja – fast hätte ich es vergessen 😉 : 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...
Read More