सीएसएस/jquery

Question

में मोबाइल (स्पर्श) डिवाइस के अनुकूल ड्रॉप डाउन मेनू मैं इस विषय पर कई विषयों को पढ़ रहा हूं, एक ड्रॉप डाउन मेनू जो मोबाइल उपकरणों पर अनुकूल है। कई बार ड्रॉप डाउन मेनू पर गैर-होवर कार्रवाई करने के लिए सबसे अच्छा माना जाता है। कामकाज हैं, एक ऐसा है कि ड्रॉप डाउन आइटम के लिए मुख्य हाइपरलिंक एक हैशटैग से लिंक होना चाहिए।

यह मोबाइल उपकरणों पर काम करता है लेकिन सामान्य डेस्कटॉप उपयोगकर्ता के लिए, यह भ्रमित होगा। तो समाधान डेस्कटॉप उपयोगकर्ताओं के लिए सामान्य ड्रॉप डाउन मेनू होना होगा जिसमें पहला हाइपरलिंक किसी पृष्ठ से लिंक होता है। मोबाइल उपयोगकर्ताओं के लिए, किसी आइटम पर टैप ड्रॉप डाउन मेनू खुल जाएगा, लेकिन मुख्य आइटम पर एक दूसरी टैप संबंधित पृष्ठ खोल देगा।

मैं निम्नलिखित साइट को देखा है और किसी भी तरह उनके मेनू वास्तव में उस तरह काम करता है: http://www.hgtv.com/ आप किसी टैबलेट पर इस को देख सकते हैं और मुख्य मेनू पर क्लिक करें, उस आइटम फिर से टैप करें और आपको पता चलेगा कि मैं क्या मतलब है।

लेकिन मैं अपनी साइट के लिए सटीक समान सेटअप कैसे ढूंढ सकता हूं या डाउनलोड कर सकता हूं?

अग्रिम

Answer 1

धन्यवाद आप दोनों मोबाइल और डेस्कटॉप ब्राउज़र में है कि कार्यक्षमता प्राप्त करने के लिए कई घटनाओं को संभाल करने के लिए जा रहे हैं।

यदि आप उस उदाहरण मेनू को देखते हैं तो आप विस्तार करने के लिए होवर करते हैं जबकि मोबाइल पर आप विस्तार/क्लिक को स्पर्श करना चाहते हैं।

एक तरीका यह है कि मैं इसे पूरा करने का प्रयास करूंगा, डेस्कटॉप के लिए 'होवर' श्रोता होगा लेकिन मोबाइल के लिए 'स्पर्श' ईवेंट श्रोता का उपयोग करें।

ऐसा करने के लिए आपको jQuery पर 'स्पर्श' जैसे कस्टम ईवेंट को जोड़ना होगा। ऐसा करने के लिए एक तरह से करने के लिए नीचे दिए गए पोस्ट देखें:

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

Answer 2

इस एक का प्रयास करें: http://suanaikyeo.com/blog/make_dropdown/

मैं पहले से ही यह कोशिश करते हैं और यह दोनों मंडराना के लिए काम कर रहा है और घटना पर क्लिक करें ..

Answer 3

यहाँ है एक डिवाइस-अज्ञेय तकनीक (यह सुनिश्चित नहीं है कि मैं इस पर फीचर डिटेक्शन पर कितना भरोसा करता हूं .. इंटरफ़ेस माउस होने पर भी कई आधुनिक ब्राउज़र टच इवेंट्स के लिए समर्थन की रिपोर्ट करते हैं) मैं टचस्क्रीन पर होवर मेनू काम करने की अपेक्षा करता था (यानी, स्पर्श को रोकें जब हम पहले क्लिक टी चाहते हैं तो समय-समय पर शीर्ष मेनू लिंक पर "क्लिक" करने से ईवेंट ओ एक होवर ट्रिगर)।

चाल यह पहचानना है कि एक स्पर्श होवर + क्लिक घटना एक-दूसरे के शीर्ष पर सही होगी .. यानी होवर ईवेंट लगभग तुरंत ईवेंट द्वारा पीछा किया जाएगा। हम इसका पता लगा सकते हैं और क्लिक को रोकने से रोक सकते हैं ... होवर ईवेंट के बाद समय की एक निश्चित दहलीज समाप्त होने पर क्लिक को ट्रिगर करने की इजाजत मिलती है।

डेस्कटॉप पर परीक्षण करते समय, मैं कभी भी होवर के बीच लगभग 150ms से अधिक समय तक तेज़ समय प्राप्त नहीं कर पाया था और इससे कोई फर्क नहीं पड़ता कि मैंने कितनी तेजी से क्लिक किया था। एक आईपैड (4 वें जीन) पर परीक्षण करते समय होवर & के बीच का समय बीतने के दौरान हमेशा 7-8 एमएस था। तो मैंने क्लिक करने की अनुमति देने के लिए 50ms का थ्रेसहोल्ड समय चुना। jQuery समारोह मैंने लिखा इस प्रकार है (यह एक मानक नेस्टेड-सूची CSS होवर मेनू मान लिया गया है) है:

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; 
     }); 
    }); 
    } 

एक आकर्षण की तरह काम करते हुए अब तक।यह संभव है कि बहुत धीमे उपकरणों के लिए 50ms बहुत कम हो।

गैर-जेएस के लिए आपके पास अभी भी डिफ़ॉल्ट सीएसएस होवर व्यवहार फ़ॉलबैक के रूप में होगा।

उम्मीद है कि इससे लोगों की मदद मिलती है, क्योंकि मुझे एक अच्छा ड्रॉप-इन समाधान नहीं मिला, जिसमें संदिग्ध सुविधा का पता लगाने और/या जेएस का उपयोग करके अपने सीएसएस होवर व्यवहार को फिर से लिखना शामिल नहीं था।

Answer 4

यहाँ मैं क्या काम कर रहा गया है:

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(); 
      } 
     }); 
    } 
}); 

मैं अपने WordPress साइट के लिए इस का उपयोग कर रहा हूँ। डेस्कटॉप ब्राउज़र (गैर-स्पर्श ब्राउज़र) पर, जब मुख्य मेनू आइटम क्लिक किया जाता है, तो यह सीधे लिंक के स्थान पर जाएगा। जब ढक गया, तो यह ड्रॉपडाउन दिखाएगा।

मोबाइल (टच ब्राउज़र) के लिए, जब मुख्य मेनू आइटम स्पर्श किया जाता है, तो यह ड्रॉपडाउन का विस्तार करेगा, और यदि फिर से क्लिक किया गया तो यह नए स्थान पर जाएगा। मैंने इस भाग को काम करने के लिए कोड की एक "रीसेट" लाइन भी जोड़ा: यदि आप पहले मुख्य मेनू आइटम (ड्रॉपडाउन का विस्तार) स्पर्श करते हैं, तो दूसरे मुख्य मेनू आइटम (दूसरे ड्रॉपडाउन का विस्तार) स्पर्श करें, फिर पहले मुख्य मेनू को स्पर्श करें फिर से आइटम, फिर भी क्लिक होने तक यह एक ड्रॉपडाउन के रूप में व्यवहार करेगा। इस लाइन के बिना, यह सीधे नए स्थान पर आगे बढ़ेगा।