Ein nicht sehr häufig verwendeter Effekt für Menüs ist das »Flipmenü«. (eigene Wortkreation) Es handelt sich um einen Drehschildeffekt bei dem der Menüpunkt bei Mausover quasi rausgeschoben und durch einen anderen Stil ersetzt wird.
Wir haben diesen Effekt schon bei mehreren Projekten eingesetzt. Zum Beispiel im » Ausstellungskonzept von waterunites-ca.org. Der Vorteil ist dass der Effekt horizontal und vertikal eingesetzt werden kann, Barrierefrei ist und auch mit PullDown-Menüs funktioniert.
Ein Beispiel
Wie funktioniert es?
Menüs bestehen meist aus Listelementen (LI) mit Links. Das Plugin extrahiert den Linktext und ersetzt es durch 2 SPAN-Elemente mit den Klassen "main_text" und "menu_slide". Im Stylesheet sind die spans so angelegt, dass sie untereinander erscheinen und das 2. SPAN-Block nicht sichtbar ist. Bei Mausover wird eine Animation gestartet die das erste SPAN ausblendet und nach Oben wegschiebt. Das Untere rückt nach und es entsteht der Effekt.
Im Download-Archiv ist ein Beispiel-CSS. Wichtig ist, dass der IE8 manchmal zickig dei der Darstellung von horizontalen Listen ist. Manchmal hilft nur der richtige Doctype. Wichtig ist außerdem die Höhenangabe mittels height, line-height und das overflow: hidden Attribut für die Links.
