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> 
    body { 
      margin: 0px; 
      padding: 0px; 
    } 
    nav { 
      position: relative; 
      top: 0; 
      width: 100%; 
      background-color: rgb(39, 39, 39); 
      overflow: auto; 
      height: auto; 
    } 
    .links { 
      display: inline-block; 
      text-align: center; 
      padding: 14px; 
      color: rgb(178, 137, 253); 
      text-decoration: none; 
      font-size: 17px; 
    } 
    .links:hover { 
      background-color: rgb(100, 100, 100); 
    } 
    .selected { 
      background-color: rgb(0, 18, 43); 
    } 
    .hamburger { 
      color: white; 
      font-weight: bolder; 
      display: none; 
    } 
    @media screen and (max-width: 600px) { 
      nav a:not(:first-child) { 
        display: none; 
      } 
      nav a.hamburger { 
        float: right; 
        display: block; 
        padding: 12px; 
      } 
      nav.openNav a.hamburger { 
        position: absolute; 
        right: 0; 
        bottom: 0; 
      } 
      nav.openNav a { 
        float: none; 
        display: block; 
        text-align: center; 
      } 
    } 
  </style> 
</head> 
<body> 
  <nav class="bottomNav"> 
    <a class="links selected" href="#">होम</a> 
    <a class="links" href="#">लॉगिन</a> 
    <a class="links" href="#">रजिस्टर</a> 
    <a class="links" href="#">संपर्क करें</a> 
    <a class="links" href="#">अधिक जानकारी</a> 
    <a class="hamburger">☰</a> 
  </nav> 
  <div> 
    <p>यहां कुछ रैंडम टेक्स्ट है</p> 
    <p>यहां कुछ रैंडम टेक्स्ट है</p> 
  </div> 
  <script> 
    function toggleNav() { 
      var x = document.getElementsByTagName("nav")[0]; 
      if (x.className === "bottomNav") { 
        x.className += " openNav"; 
      } else { 
        x.className = "bottomNav"; 
      } 
    } 
    document.querySelector(".hamburger").addEventListener("click", toggleNav); 
  </script> 
</body> 
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

स्क्रीन रिसाइज करने या मोबाइल स्क्रीन पर हैमबर्गर बटन इस प्रकार दिखाई देगा:

हैमबर्गर बटन पर क्लिक करने पर:

मुख्य बिंदु:

• @media query - 600px से कम चौड़ाई पर मेनू आइटम छुपाता है और हैमबर्गर दिखाता है
• .openNav क्लास - JavaScript द्वारा टॉगल की जाती है ताकि मेनू खुले/बंद हो
• toggleNav() फंक्शन - क्लास नेम में "openNav" जोड़ता/हटाता है