Flexbox দিয়ে Navbar তৈরি

Flexbox ব্যবহার করে একটি আধুনিক এবং রেস্পন্সিভ ন্যাভিগেশন বার (Navbar) তৈরি করা সহজ। Flexbox-এর শক্তিশালী গঠন এবং বিন্যাস নিয়ন্ত্রণ ক্ষমতার মাধ্যমে সহজেই অনুভূমিক ও উল্লম্বভাবে সজ্জিত ন্যাভিগেশন তৈরি করা সম্ভব। নীচে Flexbox দিয়ে একটি ন্যাভিগেশন বার তৈরির উদাহরণ দেওয়া হলো।

HTML গঠন

<nav class="navbar">
  <div class="logo">
    <a href="#">My Logo</a>
  </div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="menu-icon">
    <span>☰</span> <!-- Hamburger Icon -->
  </div>
</nav>

CSS (Flexbox দিয়ে Navbar ডিজাইন)

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* Navbar Styling */
.navbar {
  display: flex; /* Flexbox সক্রিয় */
  justify-content: space-between; /* আইটেমগুলোকে দুই প্রান্তে রাখবে */
  align-items: center; /* ভেতরের আইটেমগুলোকে উল্লম্বভাবে সেন্টার করবে */
  background-color: #333; /* Navbar এর ব্যাকগ্রাউন্ড কালার */
  padding: 10px 20px;
}

.navbar .logo a {
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  list-style: none; /* লিস্ট আইটেমগুলোর ডিফল্ট পয়েন্ট বাদ দেওয়া */
  display: flex; /* Flexbox ব্যবহার */
}

.nav-links li {
  margin: 0 15px; /* আইটেমগুলোর মধ্যে জায়গা */
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  padding: 8px 16px;
  transition: background-color 0.3s ease;
}

.nav-links a:hover {
  background-color: #575757; /* Hover করলে ব্যাকগ্রাউন্ড পরিবর্তন */
}

.menu-icon {
  display: none; /* মোবাইল ভিউতে initially hidden */
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Media Query for Mobile */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* মোবাইল স্ক্রীনে লিস্ট হাইড হবে */
    flex-direction: column; /* আইটেমগুলো উল্লম্বভাবে সাজানো হবে */
    width: 100%;
    background-color: #333; /* ব্যাকগ্রাউন্ড */
  }

  .nav-links.active {
    display: flex; /* ক্লিক করলে লিস্ট দৃশ্যমান হবে */
  }

  .menu-icon {
    display: block; /* মোবাইলে মেনু আইকন দেখা যাবে */
  }
}

JavaScript (Hamburger Menu Toggle)

const menuIcon = document.querySelector('.menu-icon');
const navLinks = document.querySelector('.nav-links');

menuIcon.addEventListener('click', () => {
  navLinks.classList.toggle('active'); // মেনুতে 'active' ক্লাস যোগ অথবা মুছে দিবে
});

ব্যাখ্যা:

• Flexbox Layout:
  • .navbar ক্লাসে display: flex; ব্যবহার করা হয়েছে, যাতে logo, nav-links এবং menu-icon ফ্লেক্স আইটেম হিসেবে সাজানো হয়। justify-content: space-between; ব্যবহার করা হয়েছে যাতে ন্যাভবারের এক পাশের আইটেমগুলো অন্য পাশের আইটেমগুলো থেকে আলাদা থাকে এবং align-items: center; আইটেমগুলোকে উল্লম্বভাবে কেন্দ্রিত করবে।
• Navbar Links:
  • .nav-links কে Flexbox দিয়ে অনুভূমিকভাবে সাজানো হয়েছে। প্রত্যেকটি <li> আইটেমের মধ্যে একটি <a> ট্যাগ রয়েছে, যা ন্যাভিগেশন লিঙ্ক হিসেবে কাজ করছে।
  • .nav-links a:hover স্টাইলটি ব্যবহারকারীর হোভার করার সময় ব্যাকগ্রাউন্ড পরিবর্তন করতে সাহায্য করবে।
• Mobile Responsiveness:
  • @media (max-width: 768px) মিডিয়া কুয়েরি ব্যবহার করে মোবাইল ভিউয়ের জন্য ন্যাভবারের লেআউট পরিবর্তন করা হয়েছে। মোবাইল স্ক্রীনে ন্যাভিগেশন লিঙ্কগুলো একটি কলামে সাজানো হবে এবং display: none; দিয়ে লিস্টটি প্রথমে লুকানো থাকবে।
  • menu-icon ক্লাসে একটি হ্যামবার্গার আইকন (☰) ব্যবহার করা হয়েছে, যা মোবাইল স্ক্রীনে দেখা যাবে এবং এটি ক্লিক করার মাধ্যমে ন্যাভিগেশন লিঙ্কগুলো চালু বা বন্ধ হবে। JavaScript এর মাধ্যমে active ক্লাসটি nav-links-এ যোগ বা মুছে দেওয়া হবে, যাতে ন্যাভিগেশন মেনু মোবাইলে টগল করতে পারে।

ফলস্বরূপ (Result):

1. ডেস্কটপ ভিউ: ন্যাভবারের আইটেমগুলো অনুভূমিকভাবে এক লাইনে সাজানো থাকবে এবং হ্যামবার্গার মেনু আইকনটি দেখা যাবে না।
2. মোবাইল ভিউ: স্ক্রীনের আকার ছোট হলে, ন্যাভবারের আইটেমগুলো এক কলামে সজ্জিত হবে এবং হ্যামবার্গার মেনু আইকনটি দেখা যাবে। ব্যবহারকারী যখন মেনু আইকনে ক্লিক করবে, তখন ন্যাভিগেশন লিঙ্কগুলো দৃশ্যমান হবে।

সারাংশ

Flexbox ব্যবহার করে একটি আধুনিক এবং রেস্পন্সিভ ন্যাভবার তৈরি করা সহজ। display: flex; দিয়ে ফ্লেক্স কনটেইনার তৈরি করে, flex-direction প্রপার্টি দিয়ে আইটেমগুলোর বিন্যাস নিয়ন্ত্রণ এবং flex-wrap ব্যবহার করে রেস্পন্সিভ ডিজাইন তৈরি করা যায়। JavaScript দিয়ে মোবাইল ভিউতে হ্যামবার্গার মেনু টগল করার ব্যবস্থা করলে ডিজাইনটি আরও ইন্টারঅ্যাকটিভ হয়ে ওঠে।