nicht angemeldet
Hi Leute,
ich habe ein simples horizontales Menü mit Javascript gebaut, dessen Untermenüpunkte sich jeweils unter dem Hauptmenüpunkt nach unten ausklappen. Es kann dabei auch den Seiteninhalt überlagern. Die CSS-Eigenschaft z-index sorgt dafür, dass das Menü immer über den Inhalt liegt. Per JS ändere ich die CSS-Eigenschaft display:none und display:block für die Untermenüpunkte, die in einer Liste (<ul>) gekapselt sind.
Dies klappt auf allen Desktop-Browsern einwandfrei. Auf dem Mobile Safari des iPad gibt es nun ein komisches Problem: Beinhaltet der überlappte Seiteninhalt Bilder oder Text, können die Untermenüpunkte des überlagernden Menüs einwandfrei angeklickt werden. Wird jedoch ein Videocontent überlappt, der mit dem HTML5-Tag <video> eingebunden wurde, funktionieren nur diejenigen Links des Untermenüs, die nicht im Videocontentbereich liegen. Ok, dachte mir, das geht dann halt generell noch nicht in Mobile Safaris. Aber dann habe ich mal die Untermenüs gleich mit display:block initial sichtbar gemacht und siehe da, nun konnte ich alle Untermenüpunkte anklicken. D.h. der Mobile Safari kommt anscheinend nicht damit klar, dass der display-Status eines Links (oder eines DOM-Vorfahren-Elements) geändert wird, denn dann funktioniert der Link nicht mehr. Das gleiche Verhalten erzielte ich auch mit dem Switchen von visibility:hidden und visibility:visible.
Hat schon jemand Erfahrungen damit gesammelt? Kennt jemand einen guten Workaround?
Danke und Grüße