Bulma এর Navbar এবং Menu Components

Bulma ফ্রেমওয়ার্কে Navbar এবং Menu Components একটি ওয়েবসাইটের নেভিগেশন অংশ ডিজাইন করতে ব্যবহৃত হয়। এগুলো ব্যবহার করে আপনি খুব সহজেই একটি আধুনিক, রেসপনসিভ এবং স্টাইলিশ ন্যাভিগেশন বার তৈরি করতে পারেন। Bulma এ এগুলি তৈরি করতে ডিফল্ট ক্লাস ব্যবহার করা হয়, যা আপনার ডিজাইনকে সুন্দর ও কার্যকরী করে তোলে।

১. Navbar: নেভিগেশন বার

Bulma এর Navbar একটি অত্যন্ত জনপ্রিয় এবং রেসপনসিভ নেভিগেশন উপাদান, যা ওয়েবসাইটের শীর্ষে থাকে এবং সাধারণত সাইটের বিভিন্ন পেজ বা সেকশনের মধ্যে নেভিগেট করার জন্য ব্যবহার করা হয়। এটি বিভিন্ন লিঙ্ক, আইকন এবং মেনু আইটেম ধারণ করতে পারে।

Navbar এর মূল বৈশিষ্ট্য:

• রেসপনসিভ নেভিগেশন: Bulma এর Navbar মোবাইল ডিভাইসে স্বয়ংক্রিয়ভাবে কনটেইনারের মধ্যে ভাঁজ হয়ে যায়।
• লগো এবং লিঙ্ক: Navbar সাধারণত একটি সাইটের লগো এবং বিভিন্ন নেভিগেশন লিঙ্ক ধারণ করে।
• Dropdown মেনু: এতে ড্রপডাউন মেনু সিস্টেমও রয়েছে।

উদাহরণ: Navbar

<nav class="navbar is-primary">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="https://via.placeholder.com/112x28" alt="Logo">
    </a>
    <span class="navbar-burger" data-target="navbarBasicExample">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </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>
      <a class="navbar-item" href="#">
        Services
      </a>
      <a class="navbar-item" href="#">
        Contact
      </a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="#">
        Login
      </a>
    </div>
  </div>
</nav>

এখানে:

• navbar ক্লাসটি মূল নেভিগেশন বার তৈরি করে।
• navbar-brand ক্লাসটি সাইটের লগো বা ব্র্যান্ড নাম ধারণ করে।
• navbar-menu এবং navbar-item ক্লাসগুলো নেভিগেশন লিঙ্ক এবং মেনু আইটেমের জন্য ব্যবহৃত হয়।
• navbar-burger ক্লাসটি মোবাইল ভিউতে নেভিগেশন মেনু স্লাইডার হিসেবে কাজ করে।

২. Navbar এর কাস্টমাইজেশন

Bulma এর Navbar বিভিন্ন রঙ এবং স্টাইল দিয়ে কাস্টমাইজ করা যায়। আপনি is-primary, is-link, is-info, is-warning ইত্যাদি ক্লাস দিয়ে Navbar এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে পারেন। এছাড়া, আপনি Dropdown মেনু ব্যবহার করে আরো অ্যাডভান্সড নেভিগেশন সিস্টেম তৈরি করতে পারেন।

উদাহরণ: কাস্টম Navbar

<nav class="navbar is-link">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="https://via.placeholder.com/112x28" alt="Logo">
    </a>
    <span class="navbar-burger" data-target="navbarBasicExample">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </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>
      <a class="navbar-item" href="#">
        Portfolio
      </a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="#">
        Sign Up
      </a>
      <a class="navbar-item" href="#">
        Login
      </a>
    </div>
  </div>
</nav>

এখানে:

• is-link ক্লাসটি Navbar এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করেছে।

৩. Menu: মেনু কম্পোনেন্ট

Bulma এর Menu একটি সোজাসুজি ও ক্লিন নেভিগেশন উপাদান, যা সাধারণত সাইডবার বা ছোট নেভিগেশন মেনু হিসেবে ব্যবহার করা হয়। Menu ফ্রেমওয়ার্কের মধ্যে একটি তালিকা হিসেবে দেখা যায়, যেখানে লিঙ্কগুলো সজ্জিত থাকে।

Menu এর মূল বৈশিষ্ট্য:

• প্রধান লিস্ট আইটেম: আপনি আপনার সাইটের মেনু আইটেমগুলো লিস্ট আকারে সাজাতে পারেন।
• ড্রপডাউন মেনু: Menu কম্পোনেন্টে ড্রপডাউন মেনু তৈরি করা সম্ভব।

উদাহরণ: Menu

<aside class="menu">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Customers</a></li>
  </ul>
  
  <p class="menu-label">
    Administration
  </p>
  <ul class="menu-list">
    <li><a href="#">Team Settings</a></li>
    <li><a href="#">Manage your Team</a></li>
  </ul>
</aside>

এখানে:

• menu ক্লাসটি মেনু কম্পোনেন্ট তৈরি করেছে।
• menu-label ক্লাসটি মেনুর ট্যাগ বা শ্রেণী দেখানোর জন্য ব্যবহৃত হয়।
• menu-list ক্লাসটি লিস্ট আইটেমগুলো সাজানোর জন্য ব্যবহৃত।

৪. Menu এর কাস্টমাইজেশন

আপনি Menu কম্পোনেন্টটি কাস্টমাইজ করতে পারেন, যেমন:

• রঙ পরিবর্তন
• বাটন বা লিঙ্ক যুক্ত করা
• ড্রপডাউন বা সাব-মেনু তৈরি করা

উদাহরণ: কাস্টম Menu

<aside class="menu">
  <p class="menu-label">
    My Account
  </p>
  <ul class="menu-list">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Log Out</a></li>
  </ul>
</aside>

এখানে:

• menu-label ক্লাসটি সাইটের সেগমেন্ট বা বিভাগ দেখানোর জন্য ব্যবহার করা হয়েছে।
• menu-list ক্লাসটি লিস্ট আইটেমগুলোর জন্য।

৫. Responsive Navbar এবং Menu

Bulma ফ্রেমওয়ার্কে Navbar এবং Menu উভয়ই রেসপনসিভ হিসেবে ডিজাইন করা হয়েছে, অর্থাৎ ছোট স্ক্রীনে এগুলি স্বয়ংক্রিয়ভাবে মোবাইল ফর্ম্যাটে পরিণত হয়।

উদাহরণ: Responsive Navbar

<nav class="navbar is-primary">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="https://via.placeholder.com/112x28" alt="Logo">
    </a>
    <span class="navbar-burger" data-target="navbarExample">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </div>

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

এখানে:

• navbar-burger মোবাইল ডিভাইসে নেভিগেশন মেনুর জন্য একটি স্লাইডার তৈরি করে।

সারাংশ

Bulma ফ্রেমওয়ার্কের Navbar এবং Menu Components অত্যন্ত সহজে এবং দ্রুত নেভিগেশন উপাদান তৈরি করতে সহায়তা করে। Navbar একটি পূর্ণাঙ্গ নেভিগেশন বার তৈরি করে যেখানে বিভিন্ন লিঙ্ক, লগো এবং ড্রপডাউন মেনু থাকে। অন্যদিকে, Menu একটি সহজ লিস্ট আকারে সাইডবার বা ছোট মেনু তৈরি করতে ব্যবহৃত হয়। উভয় কম্পোনেন্টই রেসপনসিভ এবং কাস্টমাইজযোগ্য, যা মোবাইল এবং ডেস্কটপ প্ল্যাটফর্মে সুন্দরভাবে কাজ করে। Bulma এর সরলতা এবং রেসপনসিভ ডিজাইন এই উপাদানগুলিকে আরো জনপ্রিয় করে তোলে।

Bulma ফ্রেমওয়ার্কে Navbar কম্পোনেন্ট একটি গুরুত্বপূর্ণ উপাদান, যা ওয়েবসাইটের নেভিগেশন মেনু তৈরি করতে ব্যবহৃত হয়। এটি রেসপনসিভ, অর্থাৎ স্ক্রীনের সাইজ অনুসারে স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট হয় এবং ব্যবহারকারীর জন্য একটি সহজ নেভিগেশন অভিজ্ঞতা প্রদান করে।

১. বেসিক Navbar

Bulma এর navbar কম্পোনেন্টে কিছু প্রাথমিক ক্লাস ব্যবহার করে সহজে একটি নেভিগেশন বার তৈরি করা যেতে পারে। এটি সাধারণত ওয়েবসাইটের শীর্ষে থাকে এবং এতে লোগো, লিঙ্ক বা অন্যান্য উপাদান থাকতে পারে।

উদাহরণ: একটি সাধারণ Navbar

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo" width="112" height="28">
    </a>
    <span class="navbar-burger" data-target="navbarMenu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </div>

  <div id="navbarMenu" class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

২. Navbar এর প্রধান উপাদান

1. navbar-brand:
   • এটি নেভিগেশন বারের ব্র্যান্ড অংশ, সাধারণত ওয়েবসাইটের লোগো বা নাম এখানে রাখা হয়।
   • <a class="navbar-item"> ক্লাসের মাধ্যমে লোগো বা ব্র্যান্ডের লিঙ্ক তৈরি করা হয়।
2. navbar-burger:
   • এটি একটি রেসপনসিভ আইকন (যেমন: হ্যামবার্গার মেনু) যা মোবাইল স্ক্রীনে নেভিগেশন মেনু প্রদর্শন করে।
   • data-target="navbarMenu" ক্লাসের মাধ্যমে এটি নেভিগেশন মেনুর জন্য ট্রিগার হিসেবে কাজ করে।
3. navbar-menu:
   • এই অংশে সমস্ত নেভিগেশন লিঙ্ক থাকে। navbar-end ক্লাস ব্যবহার করে এটিকে সঠিকভাবে সজ্জিত করা হয়।
4. navbar-item:
   • প্রতিটি নেভিগেশন লিঙ্ককে navbar-item ক্লাসের মাধ্যমে আলাদা করা হয়।

৩. রেসপনসিভ Navbar

Bulma এর navbar-burger ক্লাসটি মোবাইল স্ক্রীনে এক্সপ্যান্ডেবল মেনু তৈরি করতে সাহায্য করে। যখন স্ক্রীন সাইজ ছোট হয়, তখন এটি একটি হ্যামবার্গার মেনু হিসেবে রূপান্তরিত হয়, যেটি ক্লিক করলে মেনু দেখতে পাওয়া যায়।

উদাহরণ: রেসপনসিভ Navbar

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>
    <span class="navbar-burger" data-target="navbarMenu">
      <span></span>
      <span></span>
      <span></span>
    </span>
  </div>

  <div id="navbarMenu" class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const burger = document.querySelector('.navbar-burger');
    const menu = document.querySelector('#navbarMenu');
    burger.addEventListener('click', () => {
      menu.classList.toggle('is-active');
      burger.classList.toggle('is-active');
    });
  });
</script>

এখানে navbar-burger ক্লাসটি মোবাইল ডিভাইসের জন্য মেনু ট্রিগার হিসেবে কাজ করবে এবং is-active ক্লাসটি নেভিগেশন মেনুকে টগল করে দেখাবে বা লুকাবে।

৪. Navbar Color এবং Styling

Bulma আপনাকে নেভিগেশন বারের জন্য বিভিন্ন রঙ এবং স্টাইল কাস্টমাইজ করার সুযোগ দেয়। আপনি is-primary, is-link, is-info, ইত্যাদি ক্লাস ব্যবহার করে নেভিগেশন বারের রঙ পরিবর্তন করতে পারেন।

উদাহরণ: Navbar Color পরিবর্তন

<nav class="navbar is-primary">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <a class="navbar-item" href="#">Home</a>
      <a class="navbar-item" href="#">About</a>
      <a class="navbar-item" href="#">Services</a>
      <a class="navbar-item" href="#">Contact</a>
    </div>
  </div>
</nav>

এখানে is-primary ক্লাস ব্যবহার করা হয়েছে নেভিগেশন বারের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে।

৫. Navbar এর সাথে ফর্ম ব্যবহার

Bulma এর Navbar কম্পোনেন্টের সাথে ফর্মও যুক্ত করা যেতে পারে। এটি বিশেষত সার্চ বারে উপকারী, যেখানে ব্যবহারকারী কন্টেন্ট খুঁজতে পারেন।

উদাহরণ: Navbar এর সাথে ফর্ম

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">Logo</a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field has-addons">
          <div class="control">
            <input class="input" type="text" placeholder="Search">
          </div>
          <div class="control">
            <button class="button is-info">
              Search
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

এখানে field has-addons ক্লাস ব্যবহার করে একটি সার্চ বক্স তৈরি করা হয়েছে।

সারাংশ

Bulma এর Navbar কম্পোনেন্ট সহজে ব্যবহারযোগ্য এবং রেসপনসিভ, যা ওয়েবসাইটের নেভিগেশন মেনু তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি লোগো, লিঙ্ক, এবং অন্যান্য কম্পোনেন্ট যুক্ত করতে পারেন। Navbar-burger এবং is-active ক্লাসের মাধ্যমে এটি মোবাইল ডিভাইসে হ্যামবার্গার মেনু হিসেবে কাজ করে। এছাড়াও, আপনি color এবং styling ক্লাস ব্যবহার করে নেভিগেশন বারের ডিজাইন কাস্টমাইজ করতে পারবেন।

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 বাটনের মাধ্যমে মেনু টগল করা সম্ভব, যা নেভিগেশনকে আরও ব্যবহারযোগ্য করে তোলে।

Bulma ফ্রেমওয়ার্কের Menu কম্পোনেন্টটি একটি সহজ এবং কার্যকরী উপায় সাইডবার (Sidebar) তৈরি করার জন্য। Menu কম্পোনেন্টটি সাধারণত নেভিগেশন মেনু হিসেবে ব্যবহৃত হয়, কিন্তু এটি সাইডবার হিসেবে কাস্টমাইজ করেও ব্যবহার করা যায়। এখানে আমরা দেখবো কীভাবে Bulma এর Menu কম্পোনেন্ট ব্যবহার করে একটি সাইডবার তৈরি করা যায়।

১. Menu কম্পোনেন্টের মৌলিক গঠন

Bulma এর Menu কম্পোনেন্টটি সাধারণত একটি তালিকা আকারে থাকে, যেখানে বিভিন্ন লিঙ্ক থাকে যা আপনি সহজেই কাস্টমাইজ করতে পারেন। এটি তৈরি করতে menu, menu-list, এবং menu-label ক্লাসগুলো ব্যবহার করা হয়।

উদাহরণ:

<div class="menu">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Customers</a></li>
    <li><a href="#">Reports</a></li>
  </ul>

  <p class="menu-label">
    Administration
  </p>
  <ul class="menu-list">
    <li><a href="#">Team Settings</a></li>
    <li><a href="#">Manage Your Team</a></li>
    <li><a href="#">Invitations</a></li>
  </ul>
</div>

এখানে একটি সিম্পল মেনু তৈরি করা হয়েছে, যা General এবং Administration নামে দুটি বিভাগে বিভক্ত। প্রতিটি বিভাগে কয়েকটি লিঙ্ক রয়েছে।

২. সাইডবার স্টাইল করা

সাইডবারের জন্য Bulma এর aside ট্যাগ ব্যবহার করা হয়। এই aside ট্যাগটিকে সঠিকভাবে স্টাইল করে, একটি ফিক্সড সাইডবার তৈরি করা যেতে পারে। আমরা is-fixed ক্লাস, is-3 ক্লাস (এটি সাইডবারের প্রস্থ নির্ধারণ করে) এবং অন্যান্য ক্লাস ব্যবহার করব।

উদাহরণ:

<aside class="menu is-fixed is-3">
  <p class="menu-label">
    General
  </p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Customers</a></li>
    <li><a href="#">Reports</a></li>
  </ul>

  <p class="menu-label">
    Administration
  </p>
  <ul class="menu-list">
    <li><a href="#">Team Settings</a></li>
    <li><a href="#">Manage Your Team</a></li>
    <li><a href="#">Invitations</a></li>
  </ul>
</aside>

এখানে is-3 ক্লাসটি সাইডবারের প্রস্থকে 3 কলাম ব্যাসে সেট করে। আপনি এটি is-2, is-4, is-5 ইত্যাদিতে পরিবর্তন করতে পারেন।

৩. সাইডবারের সাথে কনটেন্ট যোগ করা

এখন, সাইডবার এবং কনটেন্ট একসাথে একটি পেজে উপস্থাপন করতে হবে। আমরা section, main, এবং content ট্যাগ ব্যবহার করে কনটেন্ট ব্লক তৈরি করব এবং সাইডবারটি বাম পাশে স্থাপন করব।

উদাহরণ:

<div class="columns">
  <div class="column is-3">
    <aside class="menu is-fixed">
      <p class="menu-label">General</p>
      <ul class="menu-list">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Reports</a></li>
      </ul>

      <p class="menu-label">Administration</p>
      <ul class="menu-list">
        <li><a href="#">Team Settings</a></li>
        <li><a href="#">Manage Your Team</a></li>
        <li><a href="#">Invitations</a></li>
      </ul>
    </aside>
  </div>
  <div class="column">
    <section class="section">
      <div class="container">
        <h1 class="title">Main Content</h1>
        <p>Here is the main content of the page.</p>
      </div>
    </section>
  </div>
</div>

এখানে, columns এবং column ক্লাস ব্যবহার করে একটি গ্রিড লেআউট তৈরি করা হয়েছে। সাইডবার is-3 কলামে এবং কনটেন্ট is-9 কলামে রাখা হয়েছে।

৪. সাইডবার টগল বা হিডিং তৈরি করা

যদি আপনি সাইডবারটিকে রেসপন্সিভ বানাতে চান এবং মোবাইল ডিভাইসে এটি toggle করতে চান, তাহলে কিছু অতিরিক্ত ক্লাস এবং JavaScript ব্যবহার করতে হবে। উদাহরণস্বরূপ, একটি বাটন ক্লিক করলে সাইডবারটি স্লাইড হয়ে আসবে বা যাবে।

উদাহরণ:

<button class="button is-primary" id="menu-toggle">
  <i class="fas fa-bars"></i>
</button>

<aside class="menu" id="menu-sidebar">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a href="#">Dashboard</a></li>
    <li><a href="#">Customers</a></li>
    <li><a href="#">Reports</a></li>
  </ul>
  <p class="menu-label">Administration</p>
  <ul class="menu-list">
    <li><a href="#">Team Settings</a></li>
    <li><a href="#">Manage Your Team</a></li>
    <li><a href="#">Invitations</a></li>
  </ul>
</aside>

<script>
  document.getElementById("menu-toggle").addEventListener("click", function() {
    var sidebar = document.getElementById("menu-sidebar");
    sidebar.classList.toggle("is-hidden");
  });
</script>

এখানে menu-toggle বাটনের মাধ্যমে সাইডবারটি is-hidden ক্লাসের মাধ্যমে টগল করা হচ্ছে। যখন ব্যবহারকারী বাটনে ক্লিক করবে, সাইডবারটি দেখা যাবে বা লুকিয়ে যাবে।

৫. সাইডবারের উন্নত কাস্টমাইজেশন

আপনি সাইডবারকে আরও কাস্টমাইজ করতে পারেন, যেমন:

• Active Link: বর্তমান সক্রিয় লিঙ্কটি হাইলাইট করা।
• Dropdown Menu: সাইডবারে ড্রপডাউন মেনু যুক্ত করা।

Active Link:

<li><a class="is-active" href="#">Dashboard</a></li>

Dropdown Menu:

<p class="menu-label">Settings</p>
<ul class="menu-list">
  <li>
    <a href="#">General</a>
    <ul>
      <li><a href="#">Account</a></li>
      <li><a href="#">Security</a></li>
    </ul>
  </li>
</ul>

এখানে, is-active ক্লাস ব্যবহার করে সক্রিয় লিঙ্ক হাইলাইট করা হয়েছে এবং dropdown মেনু তৈরির জন্য একটি সাবমেনু (ul) যুক্ত করা হয়েছে।

সারাংশ

Bulma এর Menu কম্পোনেন্ট ব্যবহার করে একটি সহজ এবং সুন্দর সাইডবার তৈরি করা সম্ভব। এই সাইডবারে বিভিন্ন নেভিগেশন লিঙ্ক এবং বিভাগ তৈরি করা যায়। আপনি সাইডবারটিকে ফিক্সড, রেসপন্সিভ বা টগলযোগ্য করতে পারেন, এবং এটি Bulma এর ক্লাস এবং কাস্টম JavaScript কোড ব্যবহার করে কাস্টমাইজ করা যেতে পারে।

Bulma ফ্রেমওয়ার্কের সাথে আপনি সহজেই Sticky Navbar এবং Fixed Menu Layouts তৈরি করতে পারবেন। এই ধরনের লেআউট ওয়েবসাইটের নেভিগেশন বার বা মেনুকে স্ক্রল করার সময় পেজের উপরিভাগে স্থির রাখে, যাতে ব্যবহারকারীরা যে কোনো সময় নেভিগেট করতে পারেন। এখানে Sticky Navbar এবং Fixed Menu Layouts তৈরি করার বিস্তারিত পদ্ধতি আলোচনা করা হয়েছে।

১. Sticky Navbar

Sticky Navbar এমন একটি নেভিগেশন বার যা পেজ স্ক্রল করার সময় পেজের উপরের দিকে আটকে থাকে। এটি ব্যবহারকারীদের জন্য সহজ অ্যাক্সেস নিশ্চিত করে, কারণ তারা যেকোনো সময় নেভিগেশন অপশন দেখতে পারেন।

Bulma তে sticky বা fixed নেভিগেশন বার তৈরির জন্য সাধারণত CSS position: sticky প্রপার্টি ব্যবহৃত হয়। তবে Bulma তে এটি একটি সহজ টিউটোরিয়ালের মাধ্যমে কিভাবে ব্যবহার করা যায় তা দেখা যাবে।

Sticky Navbar এর উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Navbar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <style>
    .navbar.is-sticky {
      position: sticky;
      top: 0;
      z-index: 1000;
    }
  </style>
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar is-sticky is-primary">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">Brand</a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <a class="navbar-item" href="#">About</a>
        <a class="navbar-item" href="#">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Content -->
  <section class="section">
    <div class="container">
      <h1 class="title">Sticky Navbar Example</h1>
      <p>Scroll down to see the sticky effect in action!</p>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <p>Keep scrolling to see how the navbar stays at the top.</p>
      <p>More content goes here...</p>
    </div>
  </section>

</body>
</html>

ব্যাখ্যা:

• navbar.is-sticky: এখানে .navbar ক্লাসে position: sticky; এবং top: 0; ব্যবহার করা হয়েছে, যার মাধ্যমে নেভিগেশন বার পেজ স্ক্রল করার সময় উপরে আটকে থাকবে।
• z-index: 1000;: এটি নিশ্চিত করে যে, নেভিগেশন বার পেজের অন্যান্য উপাদানগুলোর উপরে থাকবে।

এটি সহজেই Sticky Navbar তৈরি করার জন্য ব্যবহৃত পদ্ধতি। ব্যবহারকারীরা যখন পেজ স্ক্রল করবেন, তখন নেভিগেশন বার উপরে আটকে থাকবে এবং তারা সহজে মেনুতে নেভিগেট করতে পারবেন।

২. Fixed Menu Layouts

Fixed Menu Layouts হল সেই ধরনের লেআউট যেখানে নেভিগেশন বার বা মেনু স্ক্রল করার সময় পেজের উপরের অংশে স্থির থাকে, তবে এটি শুধুমাত্র স্ক্রল হওয়া পর্যন্ত দৃশ্যমান থাকে। এটি সাধারনত একটি নির্দিষ্ট জায়গায় থাকে এবং পেজের কন্টেন্টের সাথে মিশে যায় না।

Bulma তে একটি Fixed Menu Layout তৈরি করার জন্য position: fixed CSS প্রপার্টি ব্যবহার করা হয়, যা মেনুকে স্ক্রল করার সময় নির্দিষ্ট জায়গায় স্থির রাখে।

Fixed Menu Layout এর উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Menu</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <style>
    .navbar.is-fixed-top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
    }

    body {
      padding-top: 70px; /* Adjust this value to the height of your navbar */
    }
  </style>
</head>
<body>

  <!-- Fixed Navbar -->
  <nav class="navbar is-fixed-top is-primary">
    <div class="navbar-brand">
      <a class="navbar-item" href="#">Brand</a>
    </div>
    <div class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <a class="navbar-item" href="#">About</a>
        <a class="navbar-item" href="#">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Content -->
  <section class="section">
    <div class="container">
      <h1 class="title">Fixed Menu Example</h1>
      <p>Scroll down to see the fixed menu effect!</p>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <p>Keep scrolling to see how the menu remains fixed at the top of the page.</p>
      <p>More content goes here...</p>
    </div>
  </section>

</body>
</html>

ব্যাখ্যা:

• .navbar.is-fixed-top: position: fixed এর মাধ্যমে নেভিগেশন বারকে পেজের উপরের দিকে স্থির রাখা হয়েছে।
• top: 0; left: 0; width: 100%: এটি নেভিগেশন বারকে পুরো প্রস্থে ছড়িয়ে দিয়ে উপরের অংশে স্থির রাখে।
• body { padding-top: 70px; }: মেনু স্থির অবস্থানে থাকার কারণে, পেজের কন্টেন্টের উপরের অংশে কিছু প্যাডিং দিতে হয় যাতে কন্টেন্ট মেনুর নিচে চলে না যায়।

এই লেআউটটি একটি Fixed Menu তৈরি করার জন্য ব্যবহার করা হয়, যেখানে মেনু স্ক্রল করলেও পেজের উপরের অংশে আটকে থাকবে।

৩. সারাংশ

Bulma তে Sticky Navbar এবং Fixed Menu Layouts তৈরি করা সহজ এবং দ্রুত। Sticky Navbar ব্যবহার করে আপনি একটি নেভিগেশন বার তৈরি করতে পারেন যা পেজ স্ক্রল করার সময় উপরে আটকে থাকবে, এবং Fixed Menu ব্যবহার করে আপনি এমন একটি মেনু তৈরি করতে পারেন যা স্ক্রল করার সময় পেজের উপরের অংশে স্থির থাকবে। উভয় ক্ষেত্রেই position: sticky এবং position: fixed CSS প্রপার্টির সাহায্যে এই লেআউটগুলি তৈরি করা সম্ভব। Bulma এর সহায়তায় আপনি খুব সহজে এই লেআউটগুলো প্রয়োগ করে আপনার ওয়েবসাইটে উন্নত নেভিগেশন অভিজ্ঞতা তৈরি করতে পারবেন।