waSlideMenu.js। स्तरित स्क्रॉलिंग मेनू

jQuery- प्लगइन जो एक उप-मेनू (पेड़) को स्क्रॉलिंग मेनू सिस्टम में बदल देता है।



रिपोजिटरी: github.com/webasyst/waslidemenu

इसे आज़माएँ: jsfiddle.net/7LnSY/

उदाहरण: Demo-ru.webasyst.com



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

संबंध

<link href="/path/to/waslidemenu.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="/path/to/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.waslidemenu.min.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

मेनू संरचना

मार्कअप की परवाह किए बिना किसी भी नेस्टेड संरचना पर काम करता है: उल ली, डिव, आदि।

 <nav id="menu"> <ul> <li> <a href="#1">Parent 1</a> <ul> <li><a href="#1.1">Child 1.1</a> <ul> <li><a href="#1.1.1">We need to go deeper</li> </ul> </li> <li><a href="#1.2">Child 1.2</a></li> </ul> </li> <li><a href="#2">Parent 2</a></li> <li><a href="#2">Parent 3</a></li> </ul> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <nav id="menu"> <div class="menu"> <div class="item"> <a href="#1">1</a> <div class="menu"> <div class="item"><a href="#1.1">1.1</a></div> <div class="item"><a href="#1.2">1.2</a></div> </div> </div> <div class="item"><a href="#2">2</a></div> <div class="item"><a href="#3">3</a></div> </div> </nav>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्लगिन इनिशियलाइज़ेशन

बस:

 $('#menu').waSlideMenu();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

या आप कुछ सेटिंग्स जोड़ सकते हैं:

 $('#menu').waSlideMenu({ menuSelector : '.menu', itemSelector : '.item', autoHeightMenu: true, minHeightMenu: 400, backLinkContent: 'Back please', backOnTop: true, scrollToTopSpeed: 200, slideSpeed: 500, onLatestClick: function(){ alert('Last node ' + $(this).text() + ' selected') } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सेटिंग्स

• menuSelector: '.menu' - मेनू के लिए चयनकर्ता, ul को डिफॉल्ट करता है;
• itemSelector: '.item' - मेनू आइटम के लिए चयनकर्ता, डिफ़ॉल्ट ली है;
• autoHeightMenu: सच - संक्रमण के बाद स्वचालित रूप से सबमेनू की ऊंचाई निर्धारित करता है;
• minHeightMenu: 400 - प्रारंभ के दौरान मेनू की न्यूनतम ऊंचाई और बाद में ऊंचाई में परिवर्तन;
• BackLinkContent: 'बैक कृपया' - बैक लिंक के लिए सामग्री;
• backOnTop: true - बैक लिंक के स्थान का चयन करें;
• ScrollToTopSpeed: 200 - "वर्तमान" मेनू आइटम तक पृष्ठ की गति को स्क्रॉल करें। ऐसे समय होते हैं, जब अगले सबमेनू पर एक स्लाइड के बाद, इसके आइटम दृश्य क्षेत्र से गायब हो जाते हैं। इस स्थिति में, पृष्ठ चयनित मेनू आइटम तक स्क्रॉल करता है।
• स्लाइडस्पीड: 500 - मेनू स्लाइड की गति;
• अन्य संभावित सेटिंग्स जीथब पर रीडमी में विस्तृत हैं।

कॉलबैक

 $('#menu').waSlideMenu({ onInit : function(){ alert('Here I am!'); }, onLatestClick: function(){ alert('Last node ' + $(this).text() + ' selected') } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• onInit - मेनू को इनिशियलाइज़ करने के तुरंत बाद ट्रिगर हो जाता है;
• onSlideForward - मेनू के "इन-डेप्थ" स्तर पर स्विच करने के बाद कहा जाता है;
• onSlideBack - एक स्तर पर वापस जाने के बाद कहा जाता है;
• afterSlide - एक मेनू स्लाइड के पूरा होने के बाद चालू हो गया;
• onLatestClick - अंतिम मेनू आइटम पर एक क्लिक के बाद बुलाया;
• afterLoadAlways - URL लोड करने के परिणाम की परवाह किए बिना, हमेशा बुलाया जाता है;
• afterLoadDone - एक सफल URL लोडिंग के बाद कहा जाता है।

अन्य सुविधाएँ और आवश्यकताएँ

• प्लगइन पृष्ठ पर असीमित संख्या में मेनू से जुड़ा हो सकता है।
• यह आवश्यक सामग्री को लोड कर सकता है, पृष्ठ का शीर्षक सेट कर सकता है, ब्राउज़र के एड्रेस बार में URL बदल सकता है।
• यह स्मार्टफ़ोन और टैबलेट पर विभिन्न ब्राउज़रों (IE9 +) में अच्छा काम करता है।
• सभी प्रकार के कॉलबैक और ईवेंट।
• आपको jQuery 1.7+ का उपयोग करना चाहिए।
• एमआईटी लाइसेंस।

उपयोगी लिंक

• jQuery के पैटर्न । JQuery प्लगइन्स बनाने के विषय पर पहली चीज़ आपको ढूंढनी और पढ़नी चाहिए।
• जावास्क्रिप्ट पैटर्न संग्रह । आकाशीय साम्राज्य के एक कॉमरेड ने एक पृष्ठ पर बहुत सारी उपयोगी सामग्री एकत्र की।
• स्लाइड्स की एक जोड़ी jQuery UI विजेट कारखाने के बारे में। अगली बार मैं केवल $।

एक बार फिर: रिपॉजिटरी और डेमो से लिंक करें । मैं प्रतिक्रिया और सुझावों के लिए आभारी रहूंगा!