CSS এবং জাভাস্ক্রিপ্ট দিয়ে মোবাইল/ট্যাবলেটের জন্য টপ নেভিগেশন মেনু কীভাবে তৈরি করবেন?

রেসপন্সিভ টপ নেভিবার হ্যামবার্গার মেনুসহ

ছোট স্ক্রিনে (মোবাইল/ট্যাবলেট) নেভিগেশন লিংকগুলো লুকিয়ে রাখা এবং হ্যামবার্গার আইকনে ক্লিক করলে ড্রপ-ডাউন দেখানো — এটি আধুনিক রেসপন্সিভ ডিজাইনের স্ট্যান্ডার্ড প্যাটার্ন।

পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>রেসপন্সিভ টপ নেভিবার</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    
    /* নেভিবার কন্টেইনার */
    nav {
      position: relative;
      top: 0;
      width: 100%;
      background-color: #272727;
      overflow: hidden;
    }
    
    /* ডেস্কটপ লিংক */
    .nav-link {
      display: inline-block;
      text-align: center;
      padding: 14px 20px;
      color: #b289fd;
      text-decoration: none;
      font-size: 17px;
      transition: background 0.3s;
    }
    .nav-link:hover { background-color: #646464; }
    .nav-link.selected { background-color: #00122b; }
    
    /* হ্যামবার্গার বাটন (ডেস্কটপে লুকানো) */
    .hamburger {
      color: white;
      font-weight: bold;
      font-size: 24px;
      display: none;
      padding: 12px 16px;
      cursor: pointer;
      float: right;
    }
    
    /* মোবাইল ব্রেকপয়েন্ট: 600px */
    @media screen and (max-width: 600px) {
      /* প্রথম চাইল্ড (হোম) বাদে বাকি লিংক লুকান */
      nav a:not(:first-child):not(.hamburger) { display: none; }
      
      /* হ্যামবার্গার দেখান */
      nav a.hamburger { display: block; }
      
      /* ওপেন অবস্থায় সব লিংক ব্লক হিসেবে দেখান */
      nav.openNav a:not(.hamburger) {
        float: none;
        display: block;
        text-align: center;
      }
      nav.openNav a.hamburger {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  </style>
</head>
<body>
  <nav class="bottomNav" id="navBar">
    <a class="nav-link selected" href="#">হোম</a>
    <a class="nav-link" href="#">লগইন</a>
    <a class="nav-link" href="#">রেজিস্টার</a>
    <a class="nav-link" href="#">যোগাযোগ</a>
    <a class="nav-link" href="#">আরও তথ্য</a>
    <a class="hamburger" id="hamburgerBtn" aria-label="মেনু টগল">☰</a>
  </nav>
  
  <div style="padding: 20px;">
    <p>এখানে কিছু র‍্যান্ডম টেক্সট...</p>
    <p>আরও কিছু র‍্যান্ডম টেক্সট...</p>
  </div>
  
  <script>
    const hamburger = document.getElementById('hamburgerBtn');
    const nav = document.getElementById('navBar');
    
    hamburger.addEventListener('click', () => {
      nav.classList.toggle('openNav');
      
      // অপশনাল: আইকন পরিবর্তন (☰ ↔ ✕)
      hamburger.textContent = nav.classList.contains('openNav') ? '✕' : '☰';
      hamburger.setAttribute('aria-expanded', nav.classList.contains('openNav'));
    });
    
    // লিংক ক্লিক করলে মেনু বন্ধ (মোবাইলে UX উন্নতির জন্য)
    nav.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 600) {
          nav.classList.remove('openNav');
          hamburger.textContent = '☰';
        }
      });
    });
  </script>
</body>
</html>

কীভাবে কাজ করে

1. ডেস্কটপ (>600px): সব লিংк ইনলাইন-ব্লক হিসেবে দেখায়, হ্যামবার্গার লুকানো থাকে (`display: none`)。
2. মোবাইল (≤600px): মিডিয়া কোয়েরি কাজ করে — প্রথম লিংক বাদে বাকি লুকায়, হ্যামবার্গার দেখায়।
3. টগল: হ্যামবার্গার ক্লিক করলে `nav`-এ `openNav` ক্লাস টগল হয়। CSS-এ `nav.openNav a` রুলের মাধ্যমে সব লিংক `display: block` হয়।

উন্নত ফিচার যোগ করা (অপশনাল)

• ব্যাকড্রপ ওভারলে: মেনু খোলা থাকলে পেজের বাকি অংশে ক্লিক করলে বন্ধ হবে।
• অ্যানিমেশন: `max-height` এবং `opacity` ট্রানজিশন দিয়ে স্মুথ স্লাইড-ডাউন।
• ফোকাস ট্র্যাপিং: কীবোর্ড নেভিগেশন için Tab কী মেনুয়ের ভিতরে রাখুন।
• ARIA অ্যাট্রিবিউট: `aria-expanded`, `aria-controls`, `aria-label` যোগ করুন অ্যাক্সেসিবিলিটির জন্য।

সাধারণ সমস্যা ও সমাধান

এই প্যাটার্নটি যেকোনো রেসপন্সিভ প্রজেক্টে সরাসরি ব্যবহার করা যায়।