सर्वश्रेष्ठ जावास्क्रिप्ट ड्रॉप-डाउन मेनू?

Question

मैं एक ड्रॉप-डाउन जावास्क्रिप्ट मेनू ढूंढ रहा हूं।

यह आईई 6 और फ़ायरफ़ॉक्स 2 में भी काम करता है जो सबसे सरल और सबसे सुरुचिपूर्ण सुलभ मेनू होना चाहिए। यह ठीक होगा अगर यह अनगिनत सूची (ul) पर काम करता है तो उपयोगकर्ता जावास्क्रिप्ट समर्थन के बिना पृष्ठ का उपयोग कर सकते हैं।

आप कौन सी सिफारिश करते हैं और मुझे ऐसे मेनू में कोड कहां मिल सकता है?

Answer 1

मुझे लगता है कि jQuery superfish मेनू शानदार और प्रयोग करने में आसान है:

http://users.tpg.com.au/j_birch/plugins/superfish/

जावास्क्रिप्ट की आवश्यकता नहीं है, और यह सरल मान्य उल unorder सूचियों के आधार पर किया जाता है।

Answer 2

A List Apart - Dropdowns

मैं ऊपर की तरह एक सीएसएस-एकमात्र समाधान का उपयोग करेंगे तो उपयोगकर्ता अभी भी जावास्क्रिप्ट विकलांग के साथ ड्रॉपडाउन मेनू हो जाता है।

Answer 3

मुझे स्टिकमैन accordion पसंद है, जो इस पर निर्भर करता है कि आप इसे कैसे व्यवहार करना चाहते हैं, यह एक अच्छा प्रभाव हो सकता है।

jQuery.fn.ddnav = function() { 
     this.wrap(""); 
     this.each(function() { 
       var sel = document.createElement('select'); 
       jQuery(this).find("li.label, li a").each(function() { 
         jQuery("<option>").val(this.href ? this.href : '').html(jQuery(this).html()).appendTo(sel); 
       }); 
       jQuery(this).hide().after(sel); 
     }); 
     this.parent().find("select").after("<input type=\"button\" value=\"Go\">"); 
     var callback = function(button) { 
       var url = jQuery(button.target).parent("div").find("select").val(); 
       if(url.length) 
         window.open(url, "_self") 
     }; 
     this.parent().find("input[type='button']").click(callback); 
     this.parent().find("select").change(callback); 
     return this; 
}; 

और फिर अपने onready हैंडलर में:

Answer 4

यहाँ मेरा उत्तर jQuery का उपयोग कर

    $("ul.dropdown_nav").ddnav(); 

लेकिन मैं कहना है कि इन उपयोगिता के लिए भयानक हैं। सूची का उपयोग करने के लिए बेहतर और लोगों को एक ही समय में सभी विकल्पों को दिखाएं, और चयन के बाद दूर नेविगेट करना बेहतर नहीं है और/या जहां वे चाहते हैं वहां जाने के लिए धक्का देने के लिए एक अलग बटन की आवश्यकता है।

मुझे लगता है कि आप ऊपर कभी नहीं का उपयोग कर बंद सबसे अच्छा कर रहे हैं (और मैं कोड लिखा है!)

Answer 5

शुद्धतावादी के लिए: http://www.grc.com/menudemo.htm बिल्कुल नहीं जावास्क्रिप्ट, शुद्ध सीएसएस केवल - और लगभग सभी ब्राउज़रों के साथ काम करता है।

एक छोटी सी फेरबदल उन्हें फैंसी मेनू (jQuery, आदि)

के रूप में के रूप में अच्छे लग रहे हैं कर सकते हैं लेकिन हम भी jQuery, YUI का इस्तेमाल किया है! और दूसरे। YUI! यदि इसमें जावास्क्रिप्ट संचालित मेनू के लिए आवश्यकता है, तो इसमें उत्कृष्ट पहुंच विकल्प हैं।

http://www.tanfa.co.uk/css/examples/menu/vs7.asp

दोनों ऊर्ध्वाधर और क्षैतिज जायके में आता है: -

एंड्रयू

Answer 6

मैं इस एक का उपयोग करें।

Answer 7

मैं याहू का एक (अप्रशिक्षित) प्रशंसक रहा हूं! यूजर इंटरफेस लाइब्रेरी। They have a nice menubar system जो कार्यान्वित करना आसान है। ग्रेट क्रॉस-ब्राउज़र समर्थन।

आप शायद अन्य लोकप्रिय जावास्क्रिप्ट ढांचे, जैसे jQuery के समान कुछ भी प्राप्त कर सकते हैं।