कैसे बनाया जाता है: ड्रॉपडाउन मेन्यू साइडबार

साइड नेविगेशन में ड्रॉपडाउन मेन्यू कैसे जोड़ें जाता है。

ड्रॉपडाउन मेन्यू बाईसाइड बार क्रिएट करें

पहला कदम - HTML जोड़ें:

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

उदाहरण व्याख्या:

किसी भी एलीमेंट का उपयोग करके ड्रॉपडाउन मेनू खोलें, जैसे <button>،<a> या <p> एलीमेंट।

किसी कंटेनर एलीमेंट (जैसे <div>) का उपयोग करके ड्रॉपडाउन मेनू बनाएं और उसमें ड्रॉपडाउन मेनू लिंक जोड़ें। हम साइडबार के भीतर सभी लिंकों के लिए एक ही स्टाइल इस्तेमाल करेंगे।

दूसरा कदम - CSS जोड़ें:

/* फिक्स्ड साइडबार नेविगेशन, पूर्ण ऊंचाई */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* साइडबार लिंक और ड्रॉपडाउन मेनू बटन का स्टाइल सेट करना */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
/* माउस होवर पर */
.sidenav a:hover, .dropdown-btn:hover {
  कलर: #f1f1f1;
}
/* मुख्य सामग्री */
.main {
  मार्गिन-लेफ्ट: 200पिक्सल; /* बाईं बारे की चौड़ाई के समान */
  फ़ॉन-साइज: 20पिक्सल; /* टेक्स्ट को बढ़ाकर स्क्रॉल करने के लिए सक्षम करें */
  पैडिंग: 0पिक्सल 10पिक्सल;
}
/* गतिविधि में ड्रॉपडाउन बटन को गतिविधि वर्ग जोड़ें */
.active {
  बैकग्राउंड-कलर: ग्रीन;
  कलर: व्हाइट;
}
/* ड्रॉपडाउन मेनू कंटेनर (डिफ़ॉल्ट में छुपा होता है). वृद्धि: ड्रॉपडाउन कंटेंट के लिए एक अधिक उज्जवल पृष्ठभूमि रंग और कुछ बाईं आंतरिक छोर जोड़ने के लिए डिजाइन बदलें */
.dropdown-container {
  डिस्प्ले: नोन;
  बैकग्राउंड-कलर: #262626;
  पैडिंग-लेफ्ट: 8पिक्सल;
}
/* वृद्धि: नीचे की तिरंगे चिह्न के शैली निर्धारित करें */
.fa-caret-down {
  फ्लोट: राइट;
  पैडिंग-राइट: 8पिक्सल;
}

अपने आप साबित करें

तीसरा कदम - जावास्क्रिप्ट जोड़ें:

/* सभी ड्रॉपडाउन बटनों को गुमट करने के लिए चकार और दिखाने के बीच परिवर्तन करने - यह उपयोगकर्ता को कई ड्रॉपडाउन मेनू होने देता है और कोई टकराव नहीं होता */
वारियन्स dropdown = डॉक्युमेंट.गेटक्लासेबीज्नेम ("dropdown-btn");
वारियन्स i;
फ़ोर (i = 0; i < dropdown.लंबाई; i++) {
  dropdown[i].एडवाइसर("click", function() {
    इस.क्लासलिस्ट.टॉगल("active");
    वारियन्स ड्रॉपडाउनकंटेंट = इस.नेक्स्टएलिमेंटसिब्लिंग;
    यदि (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } अन्यथा {
      dropdownContent.style.display = "block";
    }
  });
}

अपने आप साबित करें

संबंधित पृष्ठ

शिक्षा:CSS ड्रॉपडाउन मेनू

शिक्षा:किस तरह से क्लिक करने योग्य ड्रॉपडाउन मेनू बनाया जाता है

शिक्षा:CSS नेविगेशन बार

शिक्षा:किस तरह से बाईं ओर नेविगेशन बार बनाया जाता है