HTML/CSS, JavaScript
Kommentare 2

Flyout Navigation Android Touch kompatibel machen

Die meisten Flyout Navigation Menüs im Web, die per reinem CSS und mit Hilfe von Mouseover (:hover) aufgebaut sind, funktionieren nicht auf Touch-Devices (ausgenommen jüngere Apple iOS Devices).

Touch Geräte haben ja kein Hover und können damit die Flyouts nicht öffnen. Ein Tap auf das Hauptelement öffnet sofort die dahinter liegende URL, statt das Flyout aufzumachen. Damit sind solche Menüs auf Touchgeräten nicht funktional. Das musste ich gestern leidvoll erkennen. Meine Navigation im Aqua Comfort Shop war bestimmt seit 3 Jahren für Android Gerät quasi nicht nutzbar.

Um diesem Fehler zu begegnen, versuchen zahlreiche Anleitungen im Netz das unmögliche möglich zu machen. Ich habe bei meiner Recherche für eine Lösung viele „gefruckelten“ Overlays gesehen, die nach 0.3s eines Hovers verschwinden um den Klick auf Desktops freizugeben… usw.

Kurzum, alle Anleitungen, die ich mir angesehen habe arbeiten mit Tricks die nicht HTML oder W3C konform sind. Das wollte ich nicht und habe nach einer sauberen Lösung gesucht, die meinem SEO nicht (noch weiter) schadet (als das Flyout Menü es schon eh tut).

Deswegen habe ich mich auf die Suche nach einer eleganten Möglichkeit gemacht und eine wirklich sehr gute Lösung gefunden! Ich habe mich einfach an der Idee von Apple und dem Mobile Safari gehalten. Diese Technik ist geprüft und wird angenommen.

Was heißt das genau? Nun, Apples Safari macht das so, dass der erste Tap auf einen Link, der in einem Hoher Element sitzt gar nicht ausgeführt wird. Es wird beim ersten Tap als nur das Hover-Event gefeuert. Erst beim zweiten Tap wird dann auch der Link ausgeführt.

Flyout Navigation Android Touch kompatibel machen

Das Geheimnis eines für Android-Touch optimierten Flyout Navigation Menüs ist eigentlich ein einziger jQuery Aufruf, der beim ersten Klick die Standard Funktion (href) unterdrückt. Dazu lässt sich wunderbar preventDefault() benutzen.

HTML

<ul id="mega">
    <li><a href="http://google.de">google</a>
        <div class="flyout">
            <p class="main_nav_links">
                <a href="#11">first 11</a>
            </p>
        </div>
    </li>
    <li><a href="http://bing.com">bing</a>
        <div class="flyout">
            <p class="main_nav_links">
                <a href="#21">first 21</a>
            </p>
        </div>
    </li>
</ul>

jQuery

var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf("android") > -1) {
   /* Do not perform first ul li a href on first click */
   $('ul#mega > li > a').one( "click", function(e) { 
       /* If preventDefault() is called, the default 
       ** action of the event will not be triggered.
       */
       e.preventDefault();
   });
}	

Es ist wichtig, dass dieses Script nur auf Android Geräte losgelassen wird! Bei iOS erzeugt es nämlich den Effekt, dass man drei Mal auf den Link der obersten Ebene klicken muss, bevor dieser ausgeführt wird. Das wäre nicht im Sinne des Erfinders.

Dieses Beispiel kannst Du bei mir im Shop in Live ansehen.

Wie findest Du diese Lösung? Hat Sie Dir geholfen? Ich würde mich sehr um einen Kommentar dazu freuen!
Kategorie: HTML/CSS, JavaScript

von

Ich betreibe T-Shaped Marketing in zwei Online-Shops. Dazu gehört auch ständig neue technische Raffinessen in die Shops einzubauen. Ich bin ein leidenschaftlicher Philosoph, Tech and IT Blogger auf mizine.de. Mein #COFFEE is always #000000

2 Kommentare

  1. Luigii sagt

    Danke, das ist wirklich eine sehr gute Lösung mit wenig Aufwand.

  2. Luigii sagt

    Zu füh begeistert. Das Script hat das Problem, das die Klicks für deden Link fortlaufend gezählt werden. Wenn ich also ein Untermenu öffne, dann ein anderes und dann wieder das erste Öffnen möchte, ist das der zweite Klick aucf den Eintrag und die Seite wechselt. Ich schau mal, ob ich das noch modifizieren kann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.