[easteregg]

Servus und guten Abend,

ich zermatere mir nun schon stundenlang den Kopf, wie ich ein Menü umsetzen kann. Das Menü ist ein Drop-Down per Hover-Selektor. Jetzt will ich das Menü auch auf Touch Devices verfügbar machen, allerdings liegt hier der Fuchs begraben.

Mein aktueller Stand: http://jsfiddle.net/fvNXX/

Wo es jetzt aber hapert: Wenn ich schnell hintereinander zwei Menüs öffne, bleiben beide offen. Das letzt-geöffnete noch mit dem Pseudo-Hover Effekt (mit Box-Shadow), das vorherige lediglich mit durch jQuery geöffnetem Bereich (ohne Box-Shadow).
Das ist natürlich nicht Sinn der Sache, offen sein soll immer nur das letzt-geöffnete Menü.

Wo liegt mein Denkfehler?
Oder gibt es sogar einen einfacheren Ansatz, auf den ich bisher nicht gestoßen bin?

Danke euch im Voraus!

[Karlarsch]

Es gibt für Touchdisplays kein Pendant zu "onmouseover".
Eine benutzerfreundliche Navigation für Touch hat keine hover-Funktionalität.

Das von dir verwendete "ontouchstart" ist vergleichbar mit "onmousedown" ... und du würdest doch wirklich niemandem eine Navigation vorsetzen wollen die nur aufklappt/funktioniert, wenn permanent die linke Maustaste gedrückt ist.

Gruß
Karl

[easteregg]

Hey Karlarsch, da stimme ich dir komplett zu. Im Script prüfe ich deshalb auch nur, ob "ontouchstart" ein vorhandenes Event wäre - sozusagen zum Erkennen, ob gerade ein Touch Device das Script aufruft (und für den IE10 das Pendant window.navigator.msPointerEnabled als Check).
Der eigentliche Aufruf der Funktion erfolgt beim click-Event.

Was nun das Problem ist: Wenn ich das Menü bei Punkt 3 per Touch (=click-Event), per Touch wieder schließe, per Touch erneut öffne - und nun Menü "Punkt 2" per Touch öffne: Dann bleibt Punkt 3 gleichzeitig mit Punkt 2 ausgeklappt. Eigentlich sollte in dem Fall Punkt 3 einklappen, und nur Punkt 2 ausgeklappt sein.

Vielleicht steh ich gerade auch etwas auf dem Schlauch. Wie könnte ich denn im click-Event prüfen, ob andere Menüpunkte offen sind, und diese ggf. schließen?

[easteregg]

Habs jetzt gelöst bekommen:
Die CSS-Klasse mit :hover-Effekt per jQuery vom Element entfernt, dafür dann bei click das übliche auf- & zu-sliden.
Zusätzlich werden alle anderen Elemente gehided, wenn sie es eh noch nicht sind, per:

[sahnemuh]

Ich hatte langeweile und habe da mal ein wenig Hand angelegt:
http://jsfiddle.net/fvNXX/5/

Was habe ich getan?
- Deine Navigationspunkte in die richtige Reihenfolge im Markup gebracht und das CSS so geändert, dass dies auch möglich ist. Deine Float-Geschichte da war ja totaler murks.
- Das CSS entschlackt und von unnötigen Selektoren befreit. zudem alle verweise auf die ID entfernt ( http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/ )
- Die Ausklapplogik des Menüs auf CSS3-Transitions umgestellt (ggf. müsste man hier für ältere Browser noch einen Fallback bauen, der das Menü einfach mit display: none; / block anzeigt)
- Das Javascript runderneuert. Nur noch Touch-Devices brauchen jetzt welches (siehe Kommentare im JS)
- Das Verhalten für Touch-Devices wie folgt umgestellt: Tappt man auf den eigentlichen Text, wird der Link ausgeführt. Tappt man auf den Pfeil rechts vom Menüpunkt, wird das Untermenü ausgeklappt

Bei Fragen: Fragen.