CSS और JavaScript से कर्टेन नेविगेशन मेनू कैसे बनाएं?

CSS और JavaScript का उपयोग करके एक कर्टेन नेविगेशन मेनू बनाने का पूरा कोड नीचे दिया गया है। यह मेनू स्क्रीन के बाईं ओर से स्लाइड होकर खुलता है और एक ओवरले प्रभाव देता है।

उदाहरण

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>कर्टेन नेविगेशन मेनू</title> 
  <style> 
    .sideNav { 
      height: 100vh; 
      width: 0; 
      position: fixed; 
      z-index: 1; 
      top: 0; 
      left: 0; 
      background-color: rgba(46, 218, 195, 0.4); 
      overflow-x: hidden; 
      padding-top: 60px; 
      transition: 0.5s; 
    } 
    .sideNav a { 
      padding: 8px 8px 8px 32px; 
      text-decoration: none; 
      font-size: 25px; 
      color: #000000; 
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
      display: block; 
      transition: 0.3s; 
      text-align: center; 
    } 
    .sideNav a:hover { 
      color: #f1f1f1; 
    } 
    .sideNav .closeBtn { 
      position: absolute; 
      top: 0; 
      right: 25px; 
      font-size: 36px; 
      margin-left: 50px; 
    } 
    button { 
      padding: 15px; 
      background-color: rgb(0, 27, 145); 
      color: rgb(255, 255, 255); 
      font-size: 20px; 
      border: none; 
      border-radius: 2%; 
    } 
  </style> 
</head> 
<body> 
  <nav class="sideNav"> 
    <a href="#" class="closeBtn">×</a> 
    <a href="#">लॉगिन</a> 
    <a href="#">रजिस्टर</a> 
    <a href="#">होम</a> 
    <a href="#">हमारे बारे में</a> 
  </nav> 
  <button class="openSideNav">साइड नेव खोलने के लिए यहां क्लिक करें</button> 
  <div class="main-content"> 
    <h1>हेडर वन</h1> 
    <p>कुछ पैराग्राफ टेक्स्ट</p> 
    <h2>हेडर टू</h2> 
    <p>और अधिक पैराग्राफ टेक्स्ट</p> 
  </div> 
  <script> 
    let openBtn = document.querySelector(".openSideNav"); 
    openBtn.addEventListener("click", () => { 
      showNav(); 
    }); 
    let closeBtn = document.querySelector(".closeBtn"); 
    closeBtn.addEventListener("click", () => { 
      hideNav(); 
    }); 
    function showNav() { 
      document.querySelector(".sideNav").style.width = "100%"; 
    } 
    function hideNav() { 
      document.querySelector(".sideNav").style.width = "0"; 
    } 
  </script> 
</body> 
</html>