ساخت نوبار حرفه‌ای با Flexbox (پروژه گام به گام)

پروژه عملی: ساخت Navbar ریسپانسیو با Flexbox! 🎨

سلام به همگی! تا اینجا کلی در مورد Flexbox یاد گرفتیم. الان وقتشه که دست به کار بشیم و یه پروژه‌ی واقعی بسازیم! قراره یه Navbar (منوی ناوبری) بسازیم که هم زیبا باشه و هم با اندازه‌های مختلف صفحه نمایش (ریسپانسیو) خودش رو تطبیق بده. Flexbox اینجا قهرمان ماست! آماده‌اید که با هم کد بزنیم و یه Navbar خفن بسازیم؟ 💪

1. ساختار HTML: پایه و اساس Navbar 🏗️

اول از همه، یه ساختار ساده HTML برای Navbarمون درست می‌کنیم. یه تگ <nav> به عنوان کانتینر اصلی، یه لوگو (می‌تونه یه تگ <a> با متن یا عکس باشه) و یه لیست از لینک‌های ناوبری (<ul> و <li>).

<nav class="main-navbar">
  <a href="#" class="navbar-logo">لوگو من</a>

  <ul class="navbar-links">
    <li><a href="#">خانه</a></li>
    <li><a href="#">درباره ما</a></li>
    <li><a href="#">خدمات</a></li>
    <li><a href="#">تماس با ما</a></li>
  </ul>

  <!-- دکمه منو برای موبایل (اول مخفی است) -->
  <button class="menu-toggle" aria-label="باز کردن منو">
    ☰
  </button>
</nav>

دکمه منو (.menu-toggle) رو فعلاً با سه خط افقی (☰) نشون دادیم. بعداً با CSS کاری می‌کنیم که فقط در موبایل دیده بشه.

2. استایل‌دهی اولیه و فعال کردن Flexbox 🖌️

حالا میریم سراغ CSS. اول چندتا استایل پایه‌ای برای حذف مارجین و پدینگ پیش‌فرض مرورگرها و تنظیم رنگ‌ها می‌دیم. بعد، کانتینر اصلی Navbar (.main-navbar) رو به یه فلکس کانتینر تبدیل می‌کنیم.

/* استایل‌های عمومی */
body {
  margin: 0;
  font-family: 'vazir', sans-serif;
  direction: rtl; /* برای فارسی */
}

a {
  text-decoration: none;
  color: inherit; /* ارث‌بری رنگ */
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* استایل Navbar */
.main-navbar {
  display: flex; /* فعال کردن فلکس! */
  justify-content: space-between; /* لوگو سمت چپ، لینک‌ها سمت راست */
  align-items: center; /* همه آیتم‌ها در وسط عمودی */
  background-color: #00897b; /* یه رنگ سبز تیره */
  padding: 10px 20px; /* پدینگ بالا/پایین و چپ/راست */
  color: white; /* رنگ متن */
  position: relative; /* برای قرار دادن منوی موبایل */
}

.navbar-logo {
  font-size: 1.5em;
  font-weight: bold;
}

.navbar-links {
  display: flex; /* لینک‌ها هم خودشون یه فلکس کانتینر می‌شن */
}

.navbar-links li {
  margin-left: 20px; /* فاصله بین لینک‌ها */
}

.navbar-links a {
  padding: 8px 15px;
  transition: background-color 0.3s ease; /* انیمیشن ظریف موقع هاور */
}

.navbar-links a:hover {
  background-color: #00695c; /* تغییر رنگ موقع هاور */
  border-radius: 4px;
}

.menu-toggle {
  display: none; /* در دسکتاپ مخفی است */
  background: none;
  border: none;
  color: white;
  font-size: 1.8em;
  cursor: pointer;
}

با justify-content: space-between; و align-items: center;، لوگو و لینک‌ها به طور خودکار در دو سمت و وسط عمودی قرار گرفتن! خیلی راحت!

3. استایل‌دهی برای موبایل و واکنش‌گرایی 📱

حالا وقتشه که Navbar رو برای صفحه‌های کوچکتر (موبایل) آماده کنیم. وقتی صفحه کوچیک می‌شه، لینک‌های افقی جا نمی‌شن. پس باید اون‌ها رو زیر هم ببریم و دکمه منو رو نشون بدیم. برای این کار از Media Queries استفاده می‌کنیم.

/* استایل‌های مخصوص موبایل (مثلاً وقتی عرض صفحه کمتر از 768 پیکسل است) */
@media (max-width: 768px) {
  .navbar-links {
    flex-direction: column; /* لینک‌ها رو ستونی کن */
    width: 100%; /* کل عرض رو بگیره */
    position: absolute; /* بالای صفحه */
    top: 60px; /* زیر نوار Navbar */
    left: 0;
    background-color: #00897b;
    padding: 10px 0;
    display: none; /* اول مخفی باشه */
  }

  .navbar-links.active {
    display: flex; /* وقتی کلاس active گرفت، نمایش داده بشه */
  }

  .navbar-links li {
    margin: 10px 0; /* فاصله عمودی بین آیتم‌ها */
    width: 100%;
    text-align: center;
  }

  .navbar-links a {
    padding: 10px;
    width: 100%;
    display: block; /* لینک‌ها هم بلوکی بشن */
  }

  .menu-toggle {
    display: block; /* دکمه منو رو نشون بده */
  }
}

4. اضافه کردن قابلیت باز و بسته شدن منو با جاوااسکریپت 🖱️

برای اینکه منوی موبایل با کلیک روی دکمه باز و بسته بشه، یه کم جاوااسکریپت لازم داریم. این کد خیلی ساده است: وقتی روی دکمه کلیک می‌شه، کلاس .active به لیست لینک‌ها اضافه یا حذف می‌شه.

const menuToggle = document.querySelector('.menu-toggle');
const navbarLinks = document.querySelector('.navbar-links');

menuToggle.addEventListener('click', () => {
  navbarLinks.classList.toggle('active');
  
  // تغییر آیکون منو (اختیاری)
  if (navbarLinks.classList.contains('active')) {
    menuToggle.textContent = '✕'; // بستن
    menuToggle.setAttribute('aria-label', 'بستن منو');
  } else {
    menuToggle.textContent = '☰'; // باز کردن
    menuToggle.setAttribute('aria-label', 'باز کردن منو');
  }
});

با اضافه کردن کلاس .active، اون قوانین CSS که برای نمایش منوی موبایل نوشتیم (display: flex;) فعال می‌شن و منو ظاهر می‌شه.

5. نتیجه نهایی و نکات تکمیلی 🎉

تبریک! 🎉 شما یه Navbar ریسپانسیو با استفاده از Flexbox ساختید! در حالت دسکتاپ، لینک‌ها در کنار لوگو قرار دارن و در موبایل، با کلیک روی دکمه منو، لینک‌ها به صورت عمودی زیر هم میان.

نکات تکمیلی:

• می‌تونید با استفاده از flex-grow: 1; روی لینک‌ها، کاری کنید که لوگو همیشه به چپ بچسبه و لینک‌ها فضای باقی‌مونده رو پر کنن.
• برای بهبود دسترسی‌پذیری (Accessibility)، از aria-label برای دکمه منو استفاده کردیم.
• اضافه کردن انیمیشن‌های CSS موقع باز و بسته شدن منو، ظاهر حرفه‌ای‌تری بهش می‌ده.

همینطور که دیدید، Flexbox چقدر کار رو برای ساخت Layoutهای پیچیده و ریسپانسیو ساده می‌کنه. حالا می‌تونید این الگو رو در پروژه‌های دیگه هم به کار ببرید! آفرین به شما! 🌟