CSS और JavaScript से क्लिक करने योग्य ड्रॉपडाउन मेनू कैसे बनाएं?

CSS और JavaScript का उपयोग करके एक क्लिक करने योग्य ड्रॉपडाउन मेनू बनाने का पूरा कोड नीचे दिया गया है। यह मेनू बटन पर क्लिक करने पर खुलता/बंद होता है।

उदाहरण

<!DOCTYPE html> 
<html> 
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <style> 
    .menu-btn { 
      background-color: #7e32d4; 
      color: white; 
      padding: 16px; 
      font-size: 20px; 
      font-weight: bolder; 
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
      border: none; 
    } 
    .dropdown-menu { 
      position: relative; 
      display: inline-block; 
    } 
    .menu-content { 
      display: none; 
      position: absolute; 
      background-color: #017575; 
      min-width: 160px; 
      z-index: 1; 
    } 
    .links { 
      color: rgb(255, 255, 255); 
      padding: 12px 16px; 
      text-decoration: none; 
      display: block; 
      font-size: 18px; 
      font-weight: bold; 
      border-bottom: 1px solid black; 
    } 
    .links:hover { 
      background-color: rgb(8, 107, 46); 
    } 
    .dropdown-menu:hover .menu-btn { 
      background-color: #3e8e41; 
    } 
  </style> 
</head> 
<body> 
  <h2>ड्रॉपडाउन बटन पर क्लिक करके मेनू खोलें/बंद करें</h2> 
  <div class="dropdown-menu"> 
    <button class="menu-btn">खोलें <</button> 
    <div class="menu-content"> 
      <a class="links" href="#">संपर्क करें</a> 
      <a class="links" href="#">हमसे मिलें</a> 
      <a class="links" href="#">हमारे बारे में</a> 
    </div> 
  </div> 
  <script> 
    let dropdownBtn = document.querySelector('.menu-btn'); 
    let menuContent = document.querySelector('.menu-content'); 
    dropdownBtn.addEventListener('click', () => { 
      if (menuContent.style.display === "") { 
        menuContent.style.display = "block"; 
      } else { 
        menuContent.style.display = ""; 
      } 
    }); 
  </script> 
</body> 
</html>