Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End
Code

रेस्पॉन्सिव डिजाइन के लिए एक स्लाइडिंग साइड नेविगेशन मेनू बनाना

by
Difficulty:BeginnerLength:ShortLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

इस ट्यूटोरियल में, आप जावास्क्रिप्ट और CSS के साथ एक विस्तार योग्य साइड नेविगेशन मेनू तैयार करेंगे। अंतिम उत्पाद नीचे दिखाए अनुसार दिखाई देगा:

Sliding Side Navigation Menu

मार्कअप

आरंभ करने के लिए, चलो हमारे साइड मेनू के लिए कुछ मार्कअप जोड़ें:

यहां आप देख सकते हैं कि हमने क्लास sidenav के साथ एक साइड मेनू div बनाया है। इसके बाद हमने एक <nav> टैग के माध्यम से वास्तविक टॉप बार नेविगेशन जोड़ा, और हम हमारी साइड मेनू आइकन के लिए SVG का उपयोग कर रहे हैं।

आइकन और क्लोज़ बटन का onclick एट्रिब्यूट जावास्क्रिप्ट को ट्रिगर करेगी, जिसे हम इसके बाद जोड़ेंगे।

अपनी वेबसाइट के सभी कंटेंट को div id = "main" कंटेनर के अंदर रखना याद रखें, ताकि वह दांयी ओर स्लाइड करें।

JavaScript

इसके बाद, चलिए जावास्क्रिप्ट को openNav और closeNav फ़ंक्शन बनाने के लिए जोड़ते हैं।

CSS

अंत में, हमें अपने पेज को साइड मेन्यू और हमारे लिंक के लिए कुछ CSS के साथ स्टाइल करने की आवश्यकता होगी:

नोट: आपके मौजूदा CSS के साथ इसका उपयोग करते समय एक horizontal स्क्रॉल दिखाई नहीं देता है यह सुनिश्चित करने के लिए body {overflow-x: hidden;} आवश्यक है

अब आप अपने मेनू पर एक नज़र डाल सकते हैं और इसे अपने ब्राउज़र में try कर सकते हैं।

JQuery का उपयोग करना

यदि आप jQuery का उपयोग करते हुए साइड मेन्यू जावास्क्रिप्ट बनाना चाहते हैं, तो आप पहले से निम्नलिखित सेक्शन के साथ प्रदान किए गए जावास्क्रिप्ट को बदलकर ऐसा कर सकते हैं:

स्लाइड को हटाना

मेनू को बिना स्लाइड एनीमेशन के साथ प्रदर्शित करने के लिए, बस CSS प्रॉपर्टी transition में परिवर्तन करें, जैसा कि नीचे संक्षिप्त रूप में दिखाया गया है:

यह परिवर्तन तुरन्त दिखाई देगा क्योंकि transition में निर्दिष्ट कोई delay नहीं है। हम जिस डिफ़ॉल्ट का उपयोग करते थे वह 0.5 है

निष्कर्ष

बनाने के लिए केवल कुछ लाइन्स के कोड लगते हैं और अधिक रिसोर्सेज का उपयोग करने की आवश्यकता नहीं होती है इसके अलावा, यदि jQuery पहले से ही अन्य कार्यों के लिए पेज पर है, तो काम को और काम लाइनों के साथ बनाया जा सकता है और आगे और कस्टमाइज किया जा सकता है।

विभिन्न डिवाइस स्क्रीन रिज़ॉल्यूशन के साथ काम करने के लिए कोड को रेस्पॉन्सिव बनाना, विशिष्ट मामलों के लिए मीडिया क्वेरीज़ (media queries) जोड़कर CSS मॉडिफाई करने का मामला है।

इसे आगे बढ़ाने के लिए, आप अपने मेनू को CSS फ्रेमवर्क जैसे कि Bootstrap या Bulma के साथ स्टाइल करना चाह सकते हैं

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.