एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ मोबाइल मेनू बार कैसे बनाएं

निस्संदेह, आप टेलविंड या बूटस्ट्रैप जैसे सीएसएस ढांचे का उपयोग करके एक टॉगल करने योग्य मोबाइल मेनू बना सकते हैं।

लेकिन इसके पीछे का कॉन्सेप्ट क्या है? और आप इन सीएसएस ढांचे के आधार पर खरोंच से एक कैसे बना सकते हैं?

उपरोक्त को स्वयं करने से आपको पूर्ण अनुकूलन नियंत्रण प्राप्त होता है। तो, बिना देर किए, अपनी पसंदीदा प्रोग्रामिंग भाषा का उपयोग करके एक टॉगल करने योग्य मोबाइल मेनू बनाने का तरीका यहां बताया गया है।

यदि आपने पहले से ऐसा नहीं किया है, तो अपना प्रोजेक्ट फ़ोल्डर खोलें और अपनी प्रोजेक्ट फ़ाइलें (एचटीएमएल, सीएसएस, और जावास्क्रिप्ट) बनाएं।

नीचे, आप तीनों प्रकारों के लिए आवश्यक कोड के उदाहरण देखेंगे। और यदि आपने पहले से नहीं किया है, तो डाउनलोड करने पर विचार करें कोड सीखने के लिए ये ऐप्स आगे पढ़ने से पहले।

हम शुरुआत करेंगे एचटीएमएल:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

सीएसएस:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

जावास्क्रिप्ट जोड़ें:

लैपटॉप को दूसरे मॉनिटर hdmi के रूप में उपयोग करें

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

यहां बताया गया है कि जब आप मेनू बार पर क्लिक करते हैं तो वर्किंग आउटपुट कैसा दिखता है:

मेनू टॉगल करने योग्य है, इसलिए बार पर फिर से क्लिक करना—या पृष्ठ के भीतर कहीं भी—नेविगेशन को छिपा देता है।

सम्बंधित: CSS बैकग्राउंड ग्रेडिएंट के साथ स्टाइल वेबसाइट एलिमेंट्स

जब आप अपने वेबपेज में कहीं भी क्लिक करते हैं तो आपका ब्राउज़र सामग्री को छिपाने का समर्थन नहीं कर सकता है। आप ईवेंट लक्ष्य और जावास्क्रिप्ट लूप का उपयोग करके इसे बाध्य करने का प्रयास कर सकते हैं। आप अपने जावास्क्रिप्ट में कोड का निम्नलिखित ब्लॉक जोड़कर ऐसा कर सकते हैं:

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

तो आपने अभी-अभी जो किया उसका सारांश यहां दिया गया है: आपने का उपयोग करके तीन पंक्तियां बनाईं डिव एचटीएमएल का टैग। आपने उनकी ऊंचाई और चौड़ाई को समायोजित किया और उन्हें अपने डोम में रखा। फिर आपने जावास्क्रिप्ट का उपयोग करके इन्हें एक क्लिक ईवेंट दिया।

सम्बंधित: वेबसाइट कैसे बनाएं: शुरुआती के लिए

आपने अपने नेविगेशन का प्रारंभिक प्रदर्शन इस पर सेट किया है कोई नहीं पृष्ठ लोड होने पर उन्हें छिपाने के लिए। फिर क्लिक तीन पंक्तियों पर घटना एक जावास्क्रिप्ट तत्काल वर्ग के आधार पर इन नेविगेशन को टॉगल करती है ( दिखाया गया है ) अंत में, आपने इस नई कक्षा का उपयोग सीएसएस और जावास्क्रिप्ट का उपयोग करके नेविगेशन प्रदर्शित करने के लिए किया टॉगल सामग्री तरीका।

संबंधित: HTML, CSS और JavaScript में न्यूमॉर्फिक डिज़ाइन रुझान

हालाँकि, बाकी CSS आपकी पसंद पर निर्भर करता है। लेकिन यहाँ उदाहरण CSS स्निपेट में से एक से आपको यह अंदाजा होना चाहिए कि आपकी शैली कैसे बनाई जाए।

अपनी वेबसाइट बनाते समय अधिक रचनात्मक बनें

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

यद्यपि हमने आपको यहां एक कस्टम नेविगेशन मेनू बनाने का तरीका दिखाया है, फिर भी आप इससे आगे जा सकते हैं और इसे और अधिक आकर्षक बना सकते हैं। उदाहरण के लिए, आप नेविगेशन के प्रदर्शन को चेतन कर सकते हैं, उन्हें पृष्ठभूमि का रंग दे सकते हैं, और बहुत कुछ। और आप जो कुछ भी करते हैं, सुनिश्चित करें कि आपकी वेबसाइट उपयोगकर्ताओं के उपयोग के लिए सर्वोत्तम डिज़ाइन प्रथाओं और लेआउट का उपयोग करती है।

साझा करना साझा करना कलरव ईमेल 15 विंडोज कमांड प्रॉम्प्ट (सीएमडी) कमांड आपको अवश्य पता होना चाहिए

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

आगे पढ़िए संबंधित विषय

प्रोग्रामिंग
एचटीएमएल
सीएसएस
जावास्क्रिप्ट
कोडिंग टिप्स

लेखक के बारे में इडिसौ ओमिसोला(94 लेख प्रकाशित)

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

Idowu Omisola . की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें

अपना टॉगल करने योग्य मोबाइल मेनू कैसे बनाएं

अपनी वेबसाइट बनाते समय अधिक रचनात्मक बनें

हमारे न्यूज़लेटर की सदस्यता लें