Navigation für Touchscreens

Folgendes Problem

Aufklappmenüs auf CSS-Basis mit zwei Navigationsebenen (Ebene 1: die stets sichtbaren Links, Ebene 2: die bei Berührung mit dem Mauszeiger aufklappenden Untermenüs mit weiteren Links) funktionieren hervorragend auf Mauszeiger-gesteuerten Endgeräten, beispielsweise auf einem PC oder Notebook mit einem nicht-berührungsempfindlichen Bildschirm. Auf einem Smartphone oder Tablet-PC mit Android-Betriebssystem jedoch lassen sich die Untermenüs nicht aufklappen. – Jede Aktion des Nutzers lädt sofort eine neue Seite, das Untermenü bleibt nicht aufgeklappt. Der Grund ist, dass berührungsempfindliche Bildschirme zwar ‚Klicks‘ realisieren, aber keine Berührung mit dem Mauszeiger, da es keinen Mauszeiger gibt. Für iPhone- und iPad-Nutzer stellt sich das Problem nicht: Die Geräte erkennen, dass es sich um ein Aufklappmenü handelt. Tippt man also einen Mutter-Menüpunkt an, klappt zwar das Untermenü auf, der hinterlegte Link wird jedoch erst bei erneutem Antippen ausgeführt.

Verschiedene Angebote

Als Lösung für das Problem auf Android-Geräten bietet das WWW Scripte an, die unser Navigationsmenü für berührungsempfindliche Endgeräte zugänglich machen sollen. Ich habe Tinynav und Slimmenu ausprobiert. Tinynav realisiert ein altbackenes HTML-Optionsmenü und erhält dafür das Prädikat funktionstüchtig, aber unelegant.  Slimmenu erzeugt eine Zwitter-Lösung: Jeder Mutter-Menüpunkt mit untergeordneten Elementen behält seine Linkeigenschaft, bekommt aber eine quadratische Schaltfläche zum Ausfahren des Untermenüs hinzu. Der Mauszeiger klappt somit beim Darüberfahren wie gewohnt das Untermenü auf. Auf berührungsempfindlichen Eingabegeräten muss der Nutzer verstehen, dass er auf die Aufklapp-Schaltfläche zu tippen hat. Theoretisch eine gute Kompromiss-Lösung, der Nachteil offenbart sich jedoch in der Praxis: Die Aufklapp-Schaltfläche ist zu klein. Beim Testen mit einem kleinen Display habe ich häufiger den Menüpunkt erwischt, als die Aufklapp-Schältfläche und jedes Mal musste ich warten, bis die Seite vollständig neu geladen war.

Ich sann auf eine Lösung mit Javascript: Mein Plan war, zunächst den Browser des Endgerätes zu fragen, ob es sich um ein berührungsempfindliches (Android-) Gerät handelt, oder nicht. Danach hätte in einem Script eine Fallunterscheidung stattfinden müssen: Wenn Touch-Gerät, dann deaktiviere den hinterlegten Link, aber zeige das Untermenü. Bis zur Umsetzung bin ich nicht gekommen. Denn wie hätte ich es anstellen sollen, dass der Link für den Tablet-/Smartphone-Nutzer trotzdem erreichbar bleibt?

Folgende Lösung

Ich versehe sämtliche aufklappenden Mutter-Navigationselemente der ersten Ebene mit einem leeren Link der Form <a href=“#“>Bezeichner</a>. Damit klappt sein Untermenü auf berührungsempfindlichen Endgeräten zuverlässig auf und bleibt sichtbar, da der Browser keine neue Webseite lädt.
Den dadurch entfallenden Link füge ich als ersten Punkt dem zugehörigen Untermenü hinzu. Dadurch verdoppelt sich optisch der Navigationspunkt. Ich versehe daher das Mutter-Navigationselement mit dem Unicode-Zeichen ?, Unicode-Nummer U+25BC (9660), um seine Aufklapp-Funktionalität zu verdeutlichen.

Beispiele

 

Veröffentlicht in Blog