Navigation Bar

نوار ناوبری (Navbar) یک بخش مهم در طراحی وب هست که لینک‌های اصلی سایت (مثل صفحه اصلی، درباره ما، خدمات، تماس با ما و …) رو نمایش میده.
این نوار معمولاً در بالای صفحه قرار می‌گیره و کاربر باهاش می‌تونه بین صفحات مختلف سایت جابه‌جا بشه.

✅ ساخت یک Navbar ساده با HTML و CSS

🔹 HTML

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>Navigation Bar Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <ul class="navbar">
    <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>

</body>
</html>

🔹 CSS

/* استایل کل نوار ناوبری */
.navbar {
  list-style-type: none;  /* حذف بولت‌ها */
  margin: 0;
  padding: 0;
  background-color: #333; /* پس‌زمینه تیره */
  overflow: hidden;       /* جلوگیری از بهم‌ریختگی */
}

/* استایل هر آیتم */
.navbar li {
  float: left; /* قرار گرفتن کنار هم */
}

/* استایل لینک‌ها */
.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

/* هاور (وقتی موس روی لینک میره) */
.navbar li a:hover {
  background-color: #111;
}

📌 نتیجه

🔹 یک منوی افقی ساده می‌سازیم که لینک‌ها کنار هم قرار می‌گیرن.
🔹 وقتی موس روی هر لینک میره، رنگ پس‌زمینه تغییر می‌کنه.

🚀 نکته پیشرفته

  • میشه Navbar رو عمودی هم ساخت (با حذف float: left;).

  • با Flexbox یا Grid میشه خیلی راحت‌تر طراحی کرد.

  • در بوت‌استرپ هم کامپوننت آماده Navbar وجود داره.