Aloha ;)

Wenn nun aber der Menüpunkt selbst gleichzeitig ein Link ist…

…dann bist du an der Stelle, an der Mobilgeräte nicht mehr wirklich in der Lage sind, das gleichwertig zu bedienen wie Geräte mit Maus. Ich sprach da in der Vergangenheit schon mehrfach von einer „verlorengegangenen Interaktionsebene“, die uns Touch-Geräte-/Browser-Hersteller nach wie vor schuldig bleiben und die wir jetzt irgendwie emulieren müssen, um die selbe Vielfalt von Bedienungsmöglichkeiten zu erreichen wie mit Maussteuerung.

Es handelt sich um ein Problem, das mir damals erst aufgefallen ist, als ich mein Menü fertig hatte (davor hätte ich auch einfach entscheiden können, keine "Portalseiten", sondern ausschließlich Unterseiten einzusetzen).

Ich habe dann für Geräte mit Touch-Steuerung was eingebaut, was einen Doppel-Touch zum Aufruf der Portalseiten bedingt. Ein Tooltip erscheint und erläutert die Steuerung in einem Satz (und macht darauf aufmerksam, dass sich hinter den Kategorien nicht nur Unterseiten, sondern auch direkt Inhalte verbergen.

Zum Anschauen: https://eja-aalen.de/angebote/freizeiten^[1]

Zum Testen am Desktop: Chrome bietet in den Entwicklerwerkzeugen die "Device Toolbar" an, die auch Touch-Steuerung emuliert, ob Firefox und Konsorten das auch können weiß ich grad nicht.

Das war für mich damals der einfachste Weg, mein Menü, das an Geräten ohne Touch-Steuerung komplett ohne Javascript auskommt auch auf Touch-Geräten zugänglich zu machen. Die Bedienbarkeit ohne Javascript (mit Maus) war mir damals wichtig.

Technisch bediene ich mich dabei einer Krücke, indem ich meine a-Elemente durch neue a-Elemente ohne href ersetze (mit dem href der alten Elemente in einer Eigenschaft des node). Diese bekommen dann eine Boolean-Variable zum "scharfschalten" (rdy, initial false) und eine zur "Blockade" (block, initial false) und verändern beim Klick, wenn sie scharf geschaltet sind, window.location.href.

Ordentliche Tastatursteuerung gibt mein Menü im Moment leider nicht her, da war ich damals schlampig. Ich schätze die Tastatursteuerung geht beim Austausch der Links flöten, da Links ohne href wahrscheinlich nicht per Tastatur angewählt werden, das hätte ich noch zusätzlich sicherstellen müssen.

Grüße,

RIDER

Für Interessierte der Quellcode mit Erläuterungen:

window.addEventListener("load",function () {
	
	var elms = document.querySelectorAll('#kopfzeile ul.nav li.deeper>a');
		
	for (var i = 0; i < elms.length; i++) {
	    
	  var hr = elms[i].href;
		var text = elms[i].data;
		
		var oldElm = elms[i];
		
		var newElm = document.createElement('a');
		
		newElm.dblclick = oldElm.href;
		newElm.appendChild(oldElm.firstChild);
		
		oldElm.parentNode.replaceChild(newElm,oldElm);
		
		delete oldElm;
		
		newElm.rdy = false;
		
		newElm.blck = false;
		
		newElm.style.cursor = "pointer";
	    
	  newElm.addEventListener('mouseup',function(e) { navelmclick(this,e); });
		newElm.addEventListener('mousedown',function() { navelmmsdwn(this); });
		
		newElm.parentNode.addEventListener('touchstart', function() { navlitouch(this.firstChild); });
		newElm.parentNode.addEventListener('mouseout',function() { navliout(this.firstChild); });
	}
	
});

function navelmclick (elm,e) {
	if (elm.rdy && e.button = 0) {
		window.location.href = elm.dblclick;
	}
}

function navelmmsdwn (elm) {
	if (!elm.blck) {	
		elm.rdy = true;
	} else {
		shownote(elm);
	}
}

function navliout (elm) {
	elm.rdy = false;
	elm.blck = false;
}

function navlitouch (elm) {
	if (elm.blck) {
		elm.blck = false;
	} else {
		elm.blck = true;
	}
}

function shownote (elm) {
   /* Hinweis zur Touchsteuerung einblenden und nach kurzer Zeit wieder ausblenden */
}

Im Fall von Maussteuerung passiert folgendes: Der Anwender fährt mit der Maus auf den Link und drückt die Maus, das Mousedown-Event wird ausgelöst und setzt rdy=true, daraufhin feuert automatisch das Click-Event und, da der Link bereits scharfgeschaltet ist, wird die verlinkte Seite aufgerufen.

Im Fall von Touchsteuerung passiert dasselbe, allerdings feuert bei Touchbedienung auch das Event touchstart - und zwar bevor mousedown ausgelöst wird. Dadurch kann ich bei touchstart block=true setzen und damit das Scharfschalten des Links verhindern. Stattdessen wird bei mousedown nur der Tooltip angezeigt. Der Link erhält dann trotzdem den emulierten hover-Zustand und öffnet das Untermenü wie gewünscht. Beim erneuten Touch wird block=true wieder auf block=false umgeschaltet und damit passiert beim zweiten Touch das selbe wie beim Mausklick.