Handy (touch) Gerät freundlich Dropdown-Menü in css/jquery

Question

Ich habe viele Themen zu diesem Thema gelesen, ein Dropdown-Menü, das auf mobilen Geräten freundlich ist. Viele Male wird es als am besten angesehen, eine nicht schwebende Aktion im Dropdown-Menü zu haben. Es gibt Problemumgehungen, mit einer davon, dass der Haupt-Hyperlink für das Dropdown-Element mit einem Hashtag verknüpft werden sollte.

Dies macht es auf mobilen Geräten funktionieren, aber für den normalen Desktop-Benutzer, würde dies verwirrend sein. Die Lösung wäre also, ein normales Dropdown-Menü für Desktop-Benutzer zu haben, in dem der erste Hyperlink auch auf eine Seite verweist. Für mobile Benutzer wird beim Tippen auf ein Element das Dropdown-Menü geöffnet, beim zweiten Tippen auf das Hauptelement wird jedoch die entsprechende Seite geöffnet.

Ich habe die folgende Website gesehen und irgendwie ihr Menü funktioniert genau so: http://www.hgtv.com/ Sie diese auf einem Tablet anzeigen können, und klicken Sie auf das Hauptmenü, tippen Sie das Element wieder und Sie werden wissen, was ich meine.

Aber wie kann ich finden oder laden Sie die genaue ähnliche Setup für meine eigene Website?

Vielen Dank im Voraus

Answer 1

Sie werden mehrere Ereignisse haben zu handhaben, dass die Funktionalität in mobilen und Desktop-Browser zu erhalten.

Wenn Sie an diesem Beispiel Menü sehen Sie schweben zu erweitern, während auf mobilen Sie einen Klick/touch erweitern möchten.

Ein Weg, ich würde versuchen, dies zu tun wäre, die ‚schweben‘ Listener für Desktop haben aber einen ‚Touch‘ Ereignis-Listener für den mobilen Einsatz.

Um dies zu tun, werden Sie ein benutzerdefiniertes Ereignis wie ‚Touch‘ zu jQuery hinzufügen. Siehe den Beitrag unten für eine Art und Weise, das zu tun:

How to recognize touch events using jQuery in Safari for iPad? Is it possible?

Answer 2

Versuchen Sie dieses: http://suanaikyeo.com/blog/make_dropdown/

ich es schon versucht und es funktioniert für beide schweben und Ereignis klicken ..

Answer 3

Hier eine Geräte-agnostische Technik (nicht sicher, wie sehr ich Feature-Erkennung für diese .. vielen modernen Browsern Bericht Unterstützung für Berührungsereignisse selbst wenn die Schnittstelle Maus ist) Ich verwendete Hover-Menüs arbeiten auf Touchscreens wie erwartet (dh die Berührung zu verhindern Ereignis, wenn der obere Menü-Link vorzeitig "geklickt" wird, wenn wir nur den ersten Klick t wollen o einen Hover auslösen).

Der Trick besteht darin, zu erkennen, dass ein Touch-Hover + Klick Ereignis rechts oben auf jeder anderen passieren wird .. also das Hover-Ereignis wird fast sofort nach dem Click-Ereignis folgen. Wir können dies erkennen und verhindern, dass der Klick durchgeht ... nur wenn der Klick ausgelöst wird, wenn ein bestimmter Zeitlimit seit dem Hover-Ereignis verstrichen ist.

Wenn auf einem Desktop zu testen, war ich nie die verstrichene Zeit schneller als etwa 150 ms zwischen Schweben bekommen können und egal klicken, wie schnell ich klickte. Beim Testen auf einem iPad (4. Generation) betrug die verstrichene Zeit zwischen dem Hover & immer 7 - 8 ms. Also habe ich eine Schwellenzeit von 50ms gewählt, um zu klicken. Die jQuery-Funktion I ist geschrieben wie folgt (unter Annahme eines Standard-Nested-Liste CSS Hover-Menü):

function initNav(){ 
    // make drop-downs work properly with touchscreens by preventing instant hover-click 
    $(some_selector_for_your_top_level_list_items).each(function(){ 
     var li = $(this); 
     li.mouseover(function(){ 
     // store time of hover event 
     li.data('hoverTime', new Date().getTime()); 
     }); 
     li.children('a').click(function(){ 
     // only allow click if at least 50ms has elapsed since hover 
     return (new Date().getTime() - li.data('hoverTime')) > 50; 
     }); 
    }); 
    } 

wie ein Zauber Arbeiten so weit.Es ist möglich, dass 50 ms für viel langsamere Geräte zu niedrig sind.

Für Nicht-JS haben Sie weiterhin das standardmäßige CSS-Hover-Verhalten als Fallback.

Ich hoffe, dies hilft Menschen, da ich keine gute Drop-in-Lösung finden konnte, die keine fragwürdige Feature-Erkennung und/oder Neuschreiben Ihres CSS-Hover-Verhaltens mit JS enthielt.

Answer 4

Hier ist, was ich habe Arbeit:

function isTouchDevice(){ 
    return typeof window.ontouchstart !== 'undefined'; 
} 

jQuery(document).ready(function(){ 
    /* If mobile browser, prevent click on parent nav item from redirecting to URL */ 
    if(isTouchDevice()) { 
     // 1st click, add "clicked" class, preventing the location change. 2nd click will go through. 
     jQuery("#menu-main-menu > li > a").click(function(event) { 
      // Perform a reset - Remove the "clicked" class on all other menu items 
      jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked"); 
      jQuery(this).toggleClass("clicked"); 
      if (jQuery(this).hasClass("clicked")) { 
       event.preventDefault(); 
      } 
     }); 
    } 
}); 

ich das für meine Wordpress-Seite bin mit. Bei Desktop-Browsern (Non-Touch-Browsern) wird beim Klicken auf den Hauptmenüpunkt direkt zum Speicherort des Links gewechselt. Wenn es schwebt, wird das Dropdown angezeigt.

Wenn der Hauptmenüpunkt berührt wird, wird das Dropdown-Menü für mobile Geräte (Touch-Browser) erweitert und bei erneutem Klicken an den neuen Speicherort verschoben. Ich habe auch eine "Reset" -Zeile hinzugefügt, damit dieser Teil funktioniert: Wenn Sie den ersten Hauptmenüpunkt berühren (das Dropdown-Menü erweitern), dann berühren Sie den zweiten Hauptmenüpunkt (erweitern Sie das 2. Dropdown-Menü) und tippen Sie dann auf das erste Hauptmenü Element noch einmal, es wird sich immer noch wie ein Dropdown-Menü verhalten, bis erneut geklickt wird. Ohne diese Linie würde es direkt zum neuen Standort weitergehen.