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

কার্টেন নেভিগেশন মেনু (Curtain Navigation Menu) — ফুল-স্ক্রিন স্লাইড-ইন মেনু

একটি আধুনিক, রেসপন্সিভ সাইড নেভিগেশন মেনু যা বাটন ক্লিক করলে স্ক্রিনের বাম দিক থেকে স্লাইড হয়ে আসে (কার্টেনের মতো) এবং পুরো স্ক্রিন কভার করে। 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; }
    
    /* সাইড নেভ কন্টেইনার */
    .sideNav {
      height: 100vh;
      width: 0;
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      background-color: rgba(46, 218, 195, 0.95);
      overflow-x: hidden;
      padding-top: 60px;
      transition: width 0.5s ease;
    }
    
    /* নেভ লিংক স্টাইল */
    .sideNav a {
      padding: 12px 8px 12px 32px;
      text-decoration: none;
      font-size: 24px;
      color: #000;
      display: block;
      transition: color 0.3s;
      text-align: center;
    }
    .sideNav a:hover { color: #f1f1f1; }
    
    /* ক্লোজ বাটন */
    .sideNav .closeBtn {
      position: absolute;
      top: 15px;
      right: 25px;
      font-size: 36px;
      color: #333;
      text-decoration: none;
    }
    
    /* ওপেন বাটন */
    .openBtn {
      padding: 15px 25px;
      background-color: rgb(0, 27, 145);
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .openBtn:hover { background-color: rgb(0, 40, 180); }
    
    /* মেইন কন্টেন্ট */
    .main-content { padding: 20px; }
  </style>
</head>
<body>
  <!-- সাইড নেভ -->
  <nav class="sideNav" id="sideNav">
    <a href="#" class="closeBtn" id="closeBtn">×</a>
    <a href="#">লগইন</a>
    <a href="#">রেজিস্টার</a>
    <a href="#">হোম</a>
    <a href="#">আমাদের সম্পর্কে</a>
  </nav>
  
  <!-- ওপেন বাটন -->
  <button class="openBtn" id="openBtn">সাইড মেনু খুলুন</button>
  
  <div class="main-content">
    <h1>হেডার এক</h1>
    <p>কিছু প্যারাগ্রাফ টেক্সট</p>
    <h2>হেডার দুই</h2>
    <p>আরও কিছু প্যারাগ্রাফ টেক্সট</p>
  </div>
  
  <script>
    const sideNav = document.getElementById('sideNav');
    const openBtn = document.getElementById('openBtn');
    const closeBtn = document.getElementById('closeBtn');
    
    // মেনু খুলুন
    openBtn.addEventListener('click', () => {
      sideNav.style.width = '100%';
    });
    
    // মেনু বন্ধ করুন
    closeBtn.addEventListener('click', () => {
      sideNav.style.width = '0';
    });
    
    // ESC কী দবায় বন্ধ (অপশনাল)
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && sideNav.style.width === '100%') {
        sideNav.style.width = '0';
      }
    });
  </script>
</body>
</html>

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

1. ডিফল্ট অবস্থা: `.sideNav`-এর `width: 0` — মেনু লুকানো থাকে।
2. ওপেন ক্লিক: জাভাস্ক্রিপ্ট `width: 100%` সেট করে → CSS `transition: width 0.5s` দিয়ে স্লাইড ইন।
3. ক্লোজ ক্লিক: `width: 0` সেট করে → স্লাইড আউট।
4. z-index: 1000 নিশ্চিত করে যে মেনু সব কন্টেন্টের উপরে থাকে।

কাস্টমাইজেশন টিপস

• দিক পরিবর্তন: `left: 0` → `right: 0` করে ডান দিক থেকে আনুন।
• ব্যাকড্রপ ব্লার: `backdrop-filter: blur(5px)` যোগ করুন আধুনিক লুকের জন্য।
• ব্যাকড্রপ ক্লিক করে বন্ধ: একটি ওভারলে `div` যোগ করুন যেটি ক্লিক করলে মেনু বন্ধ হবে।
• অ্যাক্সেসিবিলিটি: `aria-expanded`, `aria-controls`, ফোকাস ট্র্যাপিং যোগ করুন।

ব্রাউজার সাপোর্ট

সকল আধুনিক ব্রাউজার + IE10+ (ট্রানজিশন সাপোর্ট)। মোবাইল ব্রাউজারেও সুন্দর কাজ করে।