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

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

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

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

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

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

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

हम HTML से शुरुआत करेंगे :

 <!DOCTYPE html>
<html>
<head>
<title>Mobile Navigation Menu</title>
</head>
<body>
<section>
<!-- Create three divs to represent the three-line dropdown menu bar -->
<div id="toggle-container">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<!-- Add your navigations here -->
<div id="toggle-content" class="toggle-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</section>
</body>

सीएसएस:

 /*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;
}

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

 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");
});

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

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

संबंधित: सीएसएस पृष्ठभूमि ढाल के साथ स्टाइल वेबसाइट तत्व

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

 //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 < dropdowns.length; i++) {
var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}

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

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

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

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

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

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

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

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