इस jQuery प्लगइन के साथ होशियार उत्तरदायी नेविगेशन मेनू बनाएँ
हर आधुनिक साइट की जरूरत है अनुकूल लेआऊट और ए प्रयोग करने योग्य नेविगेशन. वह दे दिया गया.
लेकिन, हैमबर्गर मेनू केवल इतनी दूर जा सकते हैं और वे मौलिक रूप से प्रयोज्य बदलें स्क्रीन आकार अलग करने के लिए। इससे निपटने का बेहतर तरीका है उत्तरोत्तर लिंक छिपाना एक प्लगइन के साथ जैसे OkayNav.
यह मुफ्त jQuery प्लगइन एक बहुत ही सरल मेनू सुविधा जोड़ता है किसी भी पृष्ठ पर और यह एसनीच नेविगेशन आइटम छिपाता है, विभिन्न दर्शकों के आधार पर। इस तरह से स्मार्टफोन उपयोगकर्ताओं के पास एक हैमबर्गर मेनू है, लेकिन टैबलेट उपयोगकर्ता कुछ लिंक भी देख सकते हैं.
डिफ़ॉल्ट रूप से, यह एक पर निर्भर करता है तत्त्व और ए लंबी अव्यवस्थित सूची. अब तक, मुझे नहीं लगता कि यह प्लगइन मल्टी-लेवल ड्रॉपडाउन का समर्थन करता है, लेकिन यदि आपको थोड़ा सा पता है कि आप इसे खुद जोड़ सकते हैं.
OKNav बेहद सरल है और यह है सरल वेबसाइटों के लिए है कि केवल नेविगेशन लिंक का एक मुट्ठी भर है। ये लिंक धीरे-धीरे एक ऑफ-स्क्रीन मेनू के पीछे छिपें एक बार जब वे एक निश्चित व्यूपोर्ट और अधिक लिंक छिपाते रहते हैं ब्राउज़र जितना छोटा हो जाता है.
आपको करने की आवश्यकता होगी अपनी अव्यवस्थित सूची लपेटें एक नेविगेशन तत्व में और इसे एक विशिष्ट आईडी दें। तब आप कर सकते हो पूरे नौसेना को लक्षित करें उसके साथ okayNav ()
इस तरह से कार्य करें:
var नेवीगेशन = $ ('# नौसेना-मुख्य')। OKNav ();
ध्यान दें यह सिर्फ है सबसे सरल सेटअप बिना किसी कस्टम फीचर्स के। आप साथ काम कर सकते हैं एक दर्जन से अधिक कस्टम विकल्प आइकन शैली, मेनू एनीमेशन, स्वाइप समर्थन और कॉलबैक फ़ंक्शन को नियंत्रित करने के लिए इस लाइब्रेरी में बनाया गया है.
और, आप मेनू को कॉल भी कर सकते हैं वसीयत में खुला / बंद फ़ंक्शन के लिए विशिष्ट मान पास करके। यहाँ एक सरल उदाहरण है नेविगेशन खोलें:
navigation.okayNav ( 'openInvisibleNav');
इन सभी कोड को अच्छी तरह से प्रलेखित किया गया है गिटहब रेपो जिसमें स्क्रिप्ट का डाउनलोड भी शामिल है। यदि आप CDN मार्ग पसंद करते हैं तो आप इसका उपयोग भी कर सकते हैं रॉगिट लिंक GitHub से सीधे इस स्क्रिप्ट को जोड़ने के लिए.
OKNav है छोटी साइटों के लिए महान प्रगतिशील नेविगेशन तकनीक से लाभ। लेकिन, अगर आप अभी भी अनिश्चित हैं कि यह कैसे काम करता है तो इस डेमो को कोडपैन पर देखें कि यह छोटा सा प्लगइन क्या कर सकता है.