Kategorien-Navigation (Hover effekt) für Touchscreens anpassen

Ausgelagert aus dem Thread um das Mobile-Template:

Es geht darum, dass in der Kategorien-Navi die Unterkategorien bei Hover ausklappen, um schneller Navigieren und einen Überblick bekommen zu können.

Bei Touch-Devices (das sind ja mittlerweile nichtmehr nur Mobiles) wirkt der hover- Effekt beim Touch meist so lange, bis das click, ereignis umgesetzt ist. Man sieht also kurz das Ausklappmenu, bis man dann einen Punkt gewählt hat, reloadet aber schon die Seite auf das Ziel vom geklickten Link.
SUPER NERVIG.

Nun gibt's dazu fixes per JS, die das Verhalten so ändern, dass beim ersten touch kein klick, sondern nur ein hover-effekt passiert, der so lange anhält, bis ich mit einem weiteren touch im selben Element einen Klick auslöse oder irgendwo anders den hover-effekt beende resp. einen neuen Hover bewirke.

Sowas sollte dringend in's normale Desktop-Template!

 

Hector hat dazu im Thread oben eine Lösung vorgeschlagen:

jquery.hoverfix.js:

Code:

// Ipad & Android Navigation Hover Support
if((navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i))) {
	$('#head_navi ul li a').each(function() {
		var clicked = false;
		$(this).bind('click', function() {
			if(!clicked) return !(clicked = true);
		});
	});
}

Vielen Dank.

Bei mir (paddlershop.ch) klappt's aber noch nicht richtig gut:

• Im Android-Fon & Tablet (4.2, Android-Browser) ändert sich garnichts, auch wenn ich den User-Agent von Android auf iPad ändere.
• Das iPad macht's richtig, aber nur teilweise: nach einem ersten Touch geht das Menu auf wie gewollt. Kann's aber nicht mehr schliessen, und bei Touch auf ein anders Element der Ebene 1 entsteht dort ein klick...
• Generell denke ich, man kann bestimmt auch den touch an sich feststellen, statt den Devicetyp. Das wär erstens universeller, zweitens kann man an Android-Geräte auch eine Maus anhängen, wodurch man dann wieder einen Mauszeiger und hover hat.

 

Danke Hector.
Ah, klar. Musste nur in deinem Script die ID im Selector von #head_navi auf #menubox_categories ändern.

So brauchen aber auch Kategorien ohne Kinder einen 2. Tap zum öffnen. also hab ich den Selector noch erweitert: Statt jeden Anker nehme ich
#menubox_categories ul li a.parent

Was als Probleme bleibt sind:

• Bei meinem Android mit Maus muss man jetzt auch 2x klicken.
• Bei Kategorien 3. Ebene klappt's bei mir noch nicht. Reagiert wie ohne HoverFix. Wie ist das bei euch?
  (wobei, da hab ich bei Desktop-Browsern eh ein Problem).
• Ich nehme ich an, dass mit der aktuellen UserAgent Abfrage jede Menge Touch-Geräte aussen vor bleiben, neben jeglichen Desktops mit Touch-Bildschirm auch Mobil-Minderheiten wie WindowsPhone, FirefoxOS, Jolla, Blackberry etc. ?

Vielleicht braucht man für letzteres einen Ansatz wie den da?
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

 

Hector's code sollte funktionieren...
>> bei gambio nachbohren, das könnte mal generell aufgenommen werden.