Navbar এর সাথে Dropdowns এবং Responsive Menus

Bulma CSS ফ্রেমওয়ার্কে Navbar খুবই গুরুত্বপূর্ণ একটি উপাদান, যা ওয়েবসাইটের নেভিগেশন বা মেনু সিস্টেম তৈরি করতে ব্যবহৃত হয়। Dropdowns এবং Responsive Menus ব্যবহার করে আপনি মেনুতে আরও ফিচার যুক্ত করতে পারবেন, যাতে আপনার ওয়েবসাইটের নেভিগেশন কার্যকরী এবং মোবাইল-ফ্রেন্ডলি হয়।

১. Navbar এর সাথে Dropdowns

Bulma ফ্রেমওয়ার্কে Dropdowns তৈরি করার জন্য কিছু প্রস্তুতকৃত ক্লাস রয়েছে, যা মেনু আইটেমে ড্রপডাউন তালিকা প্রদর্শন করতে সহায়তা করে। Dropdown সাধারণত কোন একটি মেনু আইটেমের উপর ক্লিক করার পর অপশনগুলোর একটি তালিকা দেখায়।

Dropdown ক্লাস:

• navbar-item has-dropdown: এটি একটি মেনু আইটেম হিসেবে ড্রপডাউন তৈরি করে।
• is-hoverable: এটি ড্রপডাউনকে হোভার (mouse hover) করার মাধ্যমে খোলার সুবিধা দেয়।

উদাহরণ: Dropdown Menu in Navbar

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Home</a>
    <a class="navbar-item" href="#">About</a>
  </div>

  <div class="navbar-end">
    <div class="navbar-item has-dropdown is-hoverable">
      <a class="navbar-link">
        More
      </a>
      <div class="navbar-dropdown">
        <a class="navbar-item">Option 1</a>
        <a class="navbar-item">Option 2</a>
        <a class="navbar-item">Option 3</a>
        <hr class="navbar-divider">
        <a class="navbar-item">Log out</a>
      </div>
    </div>
  </div>
</nav>

এখানে একটি More নামক মেনু আইটেমের ড্রপডাউন তৈরি করা হয়েছে। যখন আপনি More বাটনে হোভার করবেন, তখন ড্রপডাউনটি খোলাবে এবং অপশনগুলোর তালিকা প্রদর্শিত হবে।

২. Responsive Navbar

Bulma ফ্রেমওয়ার্কে Responsive Navbar তৈরির জন্য navbar-burger এবং navbar-menu ক্লাস ব্যবহার করা হয়। এই মেনু ডিজাইনটি মূলত মোবাইল এবং ট্যাবলেটের জন্য উপযুক্ত, যেখানে মেনু আইটেমগুলো স্ক্রিনের আকার অনুযায়ী সঙ্কুচিত হয় এবং একটি বারের মাধ্যমে প্রদর্শিত হয়।

ক্লাস:

• navbar-burger: এটি একটি বাটন তৈরি করে যা মেনু আইটেমের জন্য কনটেইনার হিসেবে কাজ করে।
• navbar-menu: এটি মূল মেনু আইটেমগুলোর জন্য ব্যবহার করা হয়।
• is-active: এই ক্লাসটি ব্যবহার করা হয় মেনু চালু (open) বা বন্ধ (close) করার জন্য।

উদাহরণ: Responsive Navbar with Burger

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Logo</a>

    <button class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </button>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">Option 1</a>
          <a class="navbar-item">Option 2</a>
          <a class="navbar-item">Option 3</a>
        </div>
      </div>
    </div>
  </div>
</nav>

<script>
  // JavaScript to toggle the burger menu
  document.addEventListener('DOMContentLoaded', () => {
    const burger = document.querySelector('.navbar-burger');
    const menu = document.querySelector('#navbarBasicExample');

    burger.addEventListener('click', () => {
      burger.classList.toggle('is-active');
      menu.classList.toggle('is-active');
    });
  });
</script>

এখানে navbar-burger বাটনের মাধ্যমে মেনু আইটেমগুলো navbar-menu কনটেইনারে থাকবে। স্ক্রীন ছোট হলে এই বাটনে ক্লিক করলে মেনুটি দৃশ্যমান হবে এবং আবার ক্লিক করলে মেনুটি লুকিয়ে যাবে। JavaScript কোডটি এটি পরিচালনা করতে সহায়তা করে।

৩. Dropdown in Responsive Navbar

আপনি যখন responsive navbar ব্যবহার করছেন, তখন ড্রপডাউনগুলোও কার্যকরভাবে সমন্বিত করা প্রয়োজন। এর জন্য আপনি উপরের Dropdown কোডটি Responsive Navbar এর ভিতরে সংযুক্ত করতে পারবেন।

উদাহরণ: Responsive Navbar with Dropdown

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Logo</a>

    <button class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </button>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-item">Option 1</a>
          <a class="navbar-item">Option 2</a>
          <a class="navbar-item">Option 3</a>
        </div>
      </div>
    </div>
  </div>
</nav>

<script>
  // JavaScript to toggle the burger menu
  document.addEventListener('DOMContentLoaded', () => {
    const burger = document.querySelector('.navbar-burger');
    const menu = document.querySelector('#navbarBasicExample');

    burger.addEventListener('click', () => {
      burger.classList.toggle('is-active');
      menu.classList.toggle('is-active');
    });
  });
</script>

এখানে, More নামক ড্রপডাউনটি navbar-item has-dropdown is-hoverable ক্লাস ব্যবহার করে সংযুক্ত করা হয়েছে এবং এটি responsive navbar এর মধ্যে কাজ করবে।

সারাংশ

Bulma এর Navbar এর সাথে Dropdowns এবং Responsive Menus খুবই কার্যকরী। Dropdowns ব্যবহার করে আপনি মেনু আইটেমগুলোর একটি তালিকা তৈরি করতে পারেন, এবং Responsive Navbar ব্যবহার করে মেনুটি মোবাইল এবং ট্যাবলেটের জন্য উপযুক্তভাবে ডিজাইন করতে পারেন। JavaScript দিয়ে navbar-burger বাটনের মাধ্যমে মেনু টগল করা সম্ভব, যা নেভিগেশনকে আরও ব্যবহারযোগ্য করে তোলে।