निस्संदेह, आप टेलविंड या बूटस्ट्रैप जैसे सीएसएस ढांचे का उपयोग करके एक टॉगल करने योग्य मोबाइल मेनू बना सकते हैं।
लेकिन इसके पीछे का कॉन्सेप्ट क्या है? और आप इन सीएसएस ढांचे के आधार पर खरोंच से एक कैसे बना सकते हैं?
उपरोक्त को स्वयं करने से आपको पूर्ण अनुकूलन नियंत्रण प्राप्त होता है। तो, बिना देर किए, अपनी पसंदीदा प्रोग्रामिंग भाषा का उपयोग करके टॉगल करने योग्य मोबाइल मेनू बनाने का तरीका यहां बताया गया है।
अपना टॉगल करने योग्य मोबाइल मेनू कैसे बनाएं
यदि आपने पहले से ऐसा नहीं किया है, तो अपना प्रोजेक्ट फ़ोल्डर खोलें और अपनी प्रोजेक्ट फ़ाइलें (एचटीएमएल, सीएसएस, और जावास्क्रिप्ट) बनाएं।
नीचे, आप तीनों प्रकारों के लिए आवश्यक कोड के उदाहरण देखेंगे। और यदि आपने पहले से नहीं किया है, तो डाउनलोड करने पर विचार करें कोड सीखने के लिए ये ऐप आगे पढ़ने से पहले।
हम शुरुआत करेंगे एचटीएमएल:
मोबाइल नेविगेशन मेनू
तीन-पंक्ति ड्रॉपडाउन मेनू बार का प्रतिनिधित्व करने के लिए तीन डिव बनाएं
अपने नेविगेशन यहां जोड़ें
सीएसएस:
/*यह खंड सीमांकन पूरी तरह से ट्यूटोरियल के उद्देश्य के लिए है*/
अनुभाग{
चौड़ाई: 800px;
ऊंचाई: 600 पीएक्स;
मार्जिन-टॉप: 50px;
मार्जिन-बाएं: 250px;
सीमा: ठोस काला 1px;
पृष्ठभूमि: #e6e3dc;
}
/* divs कंटेनर को अपने DOM में रखें*/
#टॉगल-कंटेनर{
प्रदर्शन: ग्रिड;
चौड़ाई: फिट-सामग्री;
मार्जिन-बाएं: 720px;
मार्जिन-टॉप: 10px;
}
/*तीन डिव को एक दूसरे के ऊपर स्टैक करें। फिर उनके लिए ऊँचाई और चौड़ाई निर्धारित करें।*/
#एक दो तीन{
पृष्ठभूमि: काला;
चौड़ाई: 30 पीएक्स;
ऊंचाई: 3 पीएक्स;
मार्जिन-टॉप: 5px;
}
.टॉगल-सामग्री{
कुछ भी डिस्प्ले मत करो;
मार्जिन-बाएं: 700px;
मार्जिन-टॉप: 20px;
}
.टॉगल-सामग्री a{
प्रदर्शन क्षेत्र;
पाठ-सजावट: कोई नहीं;
कला रंग;
फ़ॉन्ट-आकार: 30px;
}
.टॉगल-कंटेंट ए: होवर{
रंग नीला;
}
/*जावास्क्रिप्ट द्वारा बनाए गए वर्ग उदाहरण को ब्लॉक में प्रदर्शित करें*/
.प्रदर्शित{
प्रदर्शन क्षेत्र;
}
जावास्क्रिप्ट जोड़ें:
वर टॉगलर = document.getElementById ("टॉगल-कंटेनर");
वर टॉगल सामग्री = document.getElementById ("टॉगल-सामग्री");
document.addEventListener ("क्लिक करें", फ़ंक्शन () {
// प्रत्येक नेविगेशन के लिए एक क्लास इंटेंस लागू करें और टॉगल करने के लिए डिस्प्ले सेट करें:
टॉगलकंटेंट्स.क्लासलिस्ट.टॉगल ("प्रदर्शित");
});
यहां बताया गया है कि जब आप मेनू बार पर क्लिक करते हैं तो एक कार्यशील आउटपुट कैसा दिखता है:
मेनू टॉगल करने योग्य है, इसलिए बार पर फिर से क्लिक करना—या पृष्ठ के भीतर कहीं भी—नेविगेशन को छिपा देता है।
संबंधित: CSS बैकग्राउंड ग्रेडिएंट के साथ स्टाइल वेबसाइट एलिमेंट्स
जब आप अपने वेबपेज में कहीं भी क्लिक करते हैं तो आपका ब्राउज़र सामग्री को छिपाने का समर्थन नहीं कर सकता है। आप ईवेंट लक्ष्य और जावास्क्रिप्ट लूप का उपयोग करके इसे बाध्य करने का प्रयास कर सकते हैं। आप अपने जावास्क्रिप्ट में कोड का निम्नलिखित ब्लॉक जोड़कर ऐसा कर सकते हैं:
// अपने वेबपेज पर एक क्लिक इवेंट जोड़ें:
window.onclick = फ़ंक्शन (घटना) {
// वेबपेज बॉडी को ट्रैक करने की अनुमति देने के लिए मेनू बार पर क्लिक ईवेंट को लक्षित करें:
अगर (!event.target.matches('#toggle-container')) {
वर ड्रॉपडाउन = document.getElementsByClassName("toggle-content");
// उनमें से प्रत्येक के माध्यम से लूप करके नेविगेशन छुपाएं:
के लिए (var i = 0; मैं वर गिरा = ड्रॉपडाउन [i];
अगर (गिराया गया। क्लासलिस्ट। शामिल है ('डिस्प्ले')) {
गिरा दिया.वर्गसूची.निकालें ('प्रदर्शन');
}
}
}
}
तो यहां आपके द्वारा किए गए कार्यों का सारांश दिया गया है: आपने का उपयोग करके तीन पंक्तियां बनाईं डिव एचटीएमएल का टैग। आपने उनकी ऊंचाई और चौड़ाई को समायोजित किया और उन्हें अपने डोम में रखा। फिर आपने जावास्क्रिप्ट का उपयोग करके इन्हें एक क्लिक ईवेंट दिया।
संबंधित: वेबसाइट कैसे बनाएं: शुरुआती के लिए
आपने अपने नेविगेशन का प्रारंभिक प्रदर्शन इस पर सेट किया है कोई नहीं पृष्ठ लोड होने पर उन्हें छिपाने के लिए। फिर क्लिक तीन पंक्तियों पर घटना एक जावास्क्रिप्ट तत्काल वर्ग के आधार पर इन नेविगेशन को टॉगल करती है (दिखाया गया है). अंत में, आपने इस नई कक्षा का उपयोग सीएसएस और जावास्क्रिप्ट का उपयोग करके नेविगेशन प्रदर्शित करने के लिए किया टॉगल सामग्री तरीका।
संबंधित: HTML, CSS और JavaScript में न्यूमॉर्फिक डिज़ाइन रुझान
हालाँकि, बाकी CSS आपकी पसंद पर निर्भर करता है। लेकिन यहां उदाहरण के तौर पर सीएसएस स्निपेट में से एक से आपको यह अंदाजा होना चाहिए कि आपको कैसे स्टाइल करना है।
अपनी वेबसाइट बनाते समय अधिक रचनात्मक बनें
एक आकर्षक वेबसाइट बनाने के लिए कुछ रचनात्मकता की आवश्यकता होती है। और एक उपयोगकर्ता के अनुकूल वेबसाइट आपके दर्शकों को एक नीरस से परिवर्तित करने की अधिक संभावना है।
यद्यपि हमने आपको यहां एक कस्टम नेविगेशन मेनू बनाने का तरीका दिखाया है, फिर भी आप इससे आगे जा सकते हैं और इसे और अधिक आकर्षक बना सकते हैं। उदाहरण के लिए, आप नेविगेशन के प्रदर्शन को चेतन कर सकते हैं, उन्हें पृष्ठभूमि का रंग दे सकते हैं, और बहुत कुछ। और आप जो कुछ भी करते हैं, सुनिश्चित करें कि आपकी वेबसाइट उपयोगकर्ताओं के उपयोग में आसान सर्वोत्तम डिज़ाइन प्रथाओं और लेआउट का उपयोग करती है।
क्या बहुत सी पुरानी तकनीकें आपके घर को अस्त-व्यस्त कर रही हैं? इस तकनीक रीसाइक्लिंग गाइड में पता करें कि इसके साथ क्या करना है!
आगे पढ़िए
- प्रोग्रामिंग
- एचटीएमएल
- सीएसएस
- जावास्क्रिप्ट
- कोडिंग टिप्स
Idowu कुछ भी स्मार्ट तकनीक और उत्पादकता के बारे में भावुक है। अपने खाली समय में, वह कोडिंग के साथ खेलता है और जब वह ऊब जाता है तो शतरंज की बिसात पर चला जाता है, लेकिन उसे कभी-कभी दिनचर्या से अलग होना भी पसंद होता है। लोगों को आधुनिक तकनीक के बारे में बताने का उनका जुनून उन्हें और अधिक लिखने के लिए प्रेरित करता है।
हमारे समाचार पत्र के सदस्य बनें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें