نوار ناوبری یا به اختصار Navbar یکی از عناصر مهم در طراحی وب‌سایت‌هاست که به کاربران کمک می‌کند به راحتی به بخش‌های مختلف سایت دسترسی پیدا کنند. در این مقاله، به زبان ساده و دوستانه، روش‌های طراحی نوار ناوبری با استفاده از CSS را بررسی خواهیم کرد. ابتدا به خواص CSS که در ساختار این قسمت کاربرد دارند، می‌پردازیم و سپس با چند نمونه کد می‌توانید درک بهتری از نحوه‌ی ساخت نوار ناوبری پیدا کنید.
نوار ناوبری می‌تواند به شکل عمودی یا افقی طراحی شود و المان‌های مختلفی مثل لوگوی سایت، لینک‌ها و آیکون‌های شبکه‌های اجتماعی را در بر بگیرد. در این راهنما، تمرکز ما بر طراحی یک نوار ناوبری ساده و زیباست که با استفاده از CSS و HTML ایجاد شده و به سادگی قابل تغییر و توسعه است.
توجه کنید که برای ساخت یک نوار ناوبری خوب، باید اصول طراحی مانند سادگی، کاربرپسند بودن و از همه مهم‌تر، واکنش‌گرا بودن (Responsive) را رعایت کنید، تا نوار ناوبری به خوبی در همه‌ی دستگاه‌ها و صفحات نمایش کار کند.
در ادامه، به ارائه کدهایی می‌پردازیم که به شما کمک می‌کند تا نوار ناوبری خود را به سادگی طراحی و پیاده‌سازی کنید. این نمونه‌ها به زبان ساده ارائه خواهند شد تا حتی اگر تازه‌کار هستید، بتوانید از آن‌ها در پروژه‌های خود استفاده کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {font-family: Arial, sans-serif; margin: 0;}
.navbar {display: flex; justify-content: space-between; background-color: #333; padding: 10px;}
.navbar a {color: white; text-decoration: none; padding: 14px 20px;}
.navbar a:hover {background-color: #ddd; color: black;}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">خانه</a>
<a href="#about">درباره ما</a>
<a href="#contact">تماس با ما</a>
</div>
</body>
</html>
توضیح خط به خط کد
<!DOCTYPE html> این خط تعیین می‌کند که سند HTML مطابق نسخه HTML5 است.
<html lang="fa"> عنصر html نشان‌دهنده‌ی ریشه سند HTML است و مشخصات زبان را به عنوان فارسی تعیین می‌کند.
<meta charset="UTF-8"> تنظیم مجموعه کاراکترها به UTF-8 برای پشتیبانی از نمایش صحیح متن‌ها به زبان‌های مختلف.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> این متا تگ اطمینان حاصل می‌کند که صفحه به صورت واکنش‌گرا نمایش داده می‌شود.
<style>...</style> این بخش استایل‌دهی CSS انجام می‌دهد تا ظاهر نوار ناوبری را تعریف کند.
body {font-family: Arial, sans-serif; margin: 0;} تنظیماتی برای فونت و حذف حاشیه‌ی پیش‌فرض صفحه انجام می‌دهد.
.navbar {display: flex; justify-content: space-between; ...} تعیین می‌کند که نوار ناوبری از مدل Flexbox برای چینش اجزاء استفاده کند و فاصله بین بخش‌ها را تنظیم می‌کند.
.navbar a {...} تنظیمات مربوط به لینک‌ها در نوار ناوبری، شامل رنگ و حاشیه‌ها.
.navbar a:hover {...} استایل وقتی لینک‌ها در هنگام هاور شدن تغییر می‌کنند.