حساب کاربری

آموزش استایل‌دهی منوی ناوبری در CSS

منوی ناوبری یکی از مهم‌ترین بخش‌های هر وب‌سایت است. با کمی CSS می‌توانیم یک لیست ساده را به یک منوی زیبا و حرفه‌ای تبدیل کنیم.

🧱 مراحل اصلی طراحی

1. ساختار HTML

<nav class="site-nav">
  <ul class="group">
    <li><a href="#">خانه</a></li>
    <li><a href="#">درباره ما</a></li>
    <li><a href="#">نمونه کارها</a></li>
    <li><a href="#">تماس با ما</a></li>
  </ul>
</nav>

2. حذف بولت‌ها و افقی‌کردن آیتم‌ها

.site-nav li {
  list-style: none;
  float: left;
}

با این کار آیتم‌ها کنار هم قرار می‌گیرند.

3. حذف فاصله پیش‌فرض مرورگر

.site-nav ul {
  margin: 0;
  padding: 0;
}

4. فاصله‌گذاری از بالای هدر

.site-nav {
  margin-top: 20px;
}

5. استایل‌دهی به لینک‌ها

.site-nav a {
  text-decoration: none;
  color: #22a087;
}

6. تبدیل لینک‌ها به دکمه

.site-nav a {
  padding: 10px 20px;
  border: 3px solid #cce3dd;
  display: inline-block;
}

7. فاصله بین دکمه‌ها

.site-nav li {
  margin-right: 5px;
}

8. هماهنگی با مرز پایینی هدر

.site-nav a {
  border-bottom: none;
}

9. افکت Hover

.site-nav a:hover {
  background-color: #cce3dd;
}

🎉 نتیجه نهایی

با همین چند خط ساده، یک لیست معمولی تبدیل به منوی ناوبری شیک و کاربرپسند شد. این تمرین نشان می‌دهد که CSS چقدر انعطاف‌پذیر و قدرتمند است.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *