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 وجود داره.