فصل نوزدهم: ساخت منوها و نوار ناوبری (Navigation Bar) با CSS

محمد
اموزش CSS

مقدمه

تقریباً در هر سایتی منو یا Navigation Bar (navbar) وجود داره تا کاربران راحت بین بخش‌های مختلف جابجا بشن. تو این فصل یاد می‌گیری چطور با CSS منوهای افقی و عمودی و حتی منوی موبایلی بسازی.

۱. یک منوی افقی ساده

HTML:

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

CSS:

.navbar {
  display: flex;
  list-style: none;
  background: #1976d2;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.navbar li {
  margin: 0 16px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  padding: 12px 18px;
  display: block;
  transition: background 0.3s;
  border-radius: 6px;
}

.navbar a:hover {
  background: #1565c0;
}

۲. منوی عمودی یا سایدبار

.navbar-vertical {
  display: flex;
  flex-direction: column;
  background: #263238;
  width: 200px;
  min-height: 100vh;
}

.navbar-vertical a {
  color: #fff;
  padding: 14px 20px;
  border-bottom: 1px solid #37474f;
  text-decoration: none;
  transition: background 0.2s;
}

.navbar-vertical a:hover {
  background: #37474f;
}

۳. واکنش‌گرا کردن منو برای موبایل (منوی همبرگری ساده)

ایده: در نمایشگر کوچک، منو مخفی شود و با کلیک روی دکمه (سه خط)، منو باز شود.

HTML نمونه:

<nav>
  <button class="nav-toggle">&#9776;</button>
  <ul class="navbar responsive">
    <li><a href="#">خانه</a></li>
    <li><a href="#">سرویس‌ها</a></li>
    <li><a href="#">تماس</a></li>
  </ul>
</nav>

CSS ابتدایی:

.nav-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  margin: 12px;
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    display: none;
    background: #1976d2;
    width: 100%;
  }

  .navbar.active { display: flex; }
  .nav-toggle { display: inline-block; }
}

جاوااسکریپت کوچک برای باز/بسته کردن منو:

const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.navbar');

navToggle.addEventListener('click', () => {
  navMenu.classList.toggle('active');
});

این چند خط کد فقط کاری می‌کند که وقتی روی دکمه «منو» (علامت سه خط) کلیک می‌کنی، منو باز یا بسته شود.
به زبان خیلی ساده‌تر:

دکمه منو و منوی اصلی را از صفحه پیدا می‌کند.
وقتی روی دکمه منو کلیک می‌کنی، به منوی سایت یک کلاس جدید به اسم active داده می‌شود یا اگر هست، برداشته می‌شود.
این کلاس (active) باعث می‌شود با CSS منو نمایان یا پنهان شود.

یعنی:

کلیک → منو باز می‌شود
دوباره کلیک → منو بسته می‌شود

نیازی نیست الان جاوااسکریپت را بلد باشی؛ فقط بدان این کد کوتاه لازمه تا منو در حالت موبایل نمایش یا مخفی شود.

هر جا این کد را دیدی، فقط برای باز و بسته کردن منو استفاده می‌شود.

۴. نکات سریع

هر لینک منو را بزرگ و راحت انتخاب کن تا در موبایل هم به راحتی کلیک شود.
از transition و رنگ‌های متضاد برای جلوه و وضوح منو استفاده کن.
کاربر بداند کدام بخش فعال است (مثلاً با یک پس‌زمینه متفاوت).

۵. تمرین

۱. یک navbar افقی و یک سایدبار عمودی بساز و به هرکدام hover-effect بده.

منوی موبایلی با دکمه “همبرگری” و نمایش/مخفی شدن منو را تمرین کن.
حالت “اکتیو” را برای منویی که روی آن هستی با CSS برجسته کن.

منابع بیشتر

محمد وب‌سایت