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 leidvoll erkennen. Meine Navigation auf einem Projekt 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.