Dropdown für mobile Geräte

[PC FREAKY]

Hallo,

Ich habe ein Dropdownmenü mit :hover erstellt.

Bei Touch-Geräten funktioniert das aber leider nicht (was ja klar ist)

was ist nun die einfachste Lösung?

Kann ich irgendwie sagen, dass sobald ein touch-gerät kommt, :hover zu klick wird? das es dann also nur beim draufklicken aufklapt?

MfG PC FREAKY

 

[Daaron]

Theorie: Moderne Touch-Geräte interpretieren einmaliges Tippen als "hover", wenn :hover vorhanden ist....
Praxis: wenn der :hover in einer Listen-Navigation mit <li><a href...></li> auf li:hover triggert, dann spinnts...

Du musst bei sowas auf jeden Fall mit JavaScript beigehen.
- prüfen, ob Gerät eine Touch-Device ist (ich schätze mal, modernizr hilft hier)
- wenn ja: Alle Links mit Unterseite heraussuchen, ihnen ihre normale Click-Eigenschaft nehmen und durch ein passendes Popup (z.B. Hinzufügen einer Klasse) ergänzen.

Ich muss das wohl bei einigen unserer Seiten auch noch machen... Ich hab mich zu sehr auf "sollte so funktionieren" verlassen

 

[PC FREAKY]

Und am PC geht es auch mit deaktiviertem java Script?

Gibt es hierfür irgendwo beispiele?

 

[Daaron]

Mein Ansatz, den ich bei nächstbester Gelegenheit mal ausarbeiten werden:
Alle CSS-Deklarationen der Navigation mit :hover erhalten außerdem .hover, also z.B. statt "li:hover ul" gibts dann "li:hover ul, li.hover ul".

Bei Clicks auf das <a>-Element wird jetzt einfach:
- der normale Click-Handler (wechsle Seite) deaktiviert
- dem umschließenden <li> die Klasse .hover hinzugefügt -> Untermenü wird sichtbar
- eine Markierung gesetzt (z.B. per CSS-Klasse), dass beim nächsten Click doch der Link geöffnet werden soll.