Create A Blogger Template From Scratch - Mobile Navigation Menu

📱 Blogger Template में Mobile Navigation Menu कैसे बनायें (Step-by-Step Guide)

हमने अपने Blogger Template का Desktop और Mobile Layout डिज़ाइन कर लिया है।
अब बारी है Mobile Navigation Menu (Hamburger Menu) बनाने की।

👉 जब हम Mobile Menu Icon पर क्लिक करें तो Menu खुले, और Close Button पर क्लिक करें तो Menu छुप जाए।

आइए Step-by-Step इसे बनाते हैं।

🟢 Step 1: HTML Structure तैयार करें

सबसे पहले Mobile Menu Container और Close Button बनाएँ। सबसे पहले हमें अपने HTML File में Mobile Menu का Structure बनाना होगा।

Mobile Menu Icon के नीचे यह Code लिखें:

HTML Code :

<!-- Mobile Menu Icon पहले से मौजूद है -->
<div class="mobile-menu-icon">
  <img src="menu-icon.png" alt="menu icon">
</div>

<!-- Mobile Menu Container -->
<div class="mobile-menu-container">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</div>

<!-- Close Button -->
<div class="menu-close-icon">
  <img src="close-icon.png" alt="close icon">
</div>

📝 Explanation

.mobile-menu-container → इसमें UL (unordered list) है जिसमें सारे menu links होंगे।
.menu-close-icon → यह close करने का बटन होगा।

🟢 Step 2: Desktop पर Menu छिपाएँ

अब CSS में पहले Desktop के लिए इन दोनों elements को छिपा देते हैं।

CSS Code :

.mobile-menu-container,
.menu-close-icon {
  display: none;
}

👉 इसका मतलब — Desktop में ये दोनों चीज़ें नहीं दिखेंगी।

🟢 Step 3: Mobile Menu Container को Style करें

अब Mobile Version (max-width: 600px) में Container को style करते हैं।

CSS Code :

@media (max-width: 600px) {
  .mobile-menu-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh; /* पूरी स्क्रीन */
    background: #222; /* काला बैकग्राउंड */
    align-items: center;
    justify-content: center;
    opacity: 0; /* डिफॉल्ट में hidden */
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.03, 0.95, 0.11, 1.09);
    z-index: 200;
  }

  .mobile-menu-container ul {
    list-style: none;
    text-align: center;
  }

  .mobile-menu-container ul li {
    margin: 16px 0;
  }

  .mobile-menu-container ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
  }
}

📝 Explanation

position: fixed; → Menu हमेशा स्क्रीन पर ऊपर रहेगा।
height: 100vh; → Menu पूरी ऊँचाई लेगा।
opacity: 0; pointer-events: none; → शुरुआत में menu छिपा रहेगा।
transition → Smooth animation देगा।

🟢 Step 4: Active Class के साथ Menu Show/Hide करें

अब Menu को दिखाने/छिपाने के लिए Active Class बनाएँ।

CSS Code :

.mobile-menu-container.active {
  opacity: 1;
  pointer-events: auto;
  top: 0;
}

👉 जब हम .active class add करेंगे, Menu slide होकर दिखेगा।

🟢 Step 5: Close Button Style करें

HTML Code :

@media (max-width: 600px) {
  .menu-close-icon {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background: #000;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 300;
  }

  .mobile-menu-container.active + .menu-close-icon {
    display: flex;
  }
}

📝 Explanation

z-index: 300; → Close button menu से ऊपर दिखेगा।
.mobile-menu-container.active + .menu-close-icon → जब menu active होगा तभी close button दिखाई देगा।

🟢 Step 6: JavaScript से Toggle करें

अब JS में क्लिक इवेंट जोड़ते हैं।

JavaScript Code :

const mobileMenuContainer = document.querySelector(".mobile-menu-container");
const mobileMenuIcon = document.querySelector(".mobile-menu-icon");
const menuCloseIcon = document.querySelector(".menu-close-icon");

// Menu Open
mobileMenuIcon.addEventListener("click", () => {
  mobileMenuContainer.classList.add("active");
});

// Menu Close
menuCloseIcon.addEventListener("click", () => {
  mobileMenuContainer.classList.remove("active");
});

📝 Explanation

.add("active") → Menu दिखाई देगा।
.remove("active") → Menu छिप जाएगा।

✅ Final Result

अब जब आप Mobile Menu Icon पर क्लिक करेंगे → पूरा Menu खुल जाएगा।
और Close Button दबाते ही → Menu बंद हो जाएगा।

🔜 Next Step

अब हमने Desktop + Mobile + Mobile Nav Menu डिज़ाइन पूरा कर लिया है।
अगले स्टेप में हम सीखेंगे कि इसे Blogger Theme Structure में कैसे Convert करें।