نوار ناوبری CSS

مثال: نوار ابزار

نوار ابزار عمودی

نوار ابزار افقی


نوار ابزار

نوار ابزار ساده برای هر وب‌سایتی بسیار مهم است.

با استفاده از CSS، می‌توانید یک منوی HTML بی‌مزه را به یک نوار ابزار زیبا تبدیل کنید.

نوار ابزار = لیست لینک‌ها

نوار ابزار نیاز به HTML استاندارد دارد.

در مثال ما، از لیست استاندارد HTML برای ساخت نوار ابزار استفاده خواهیم کرد.

نوار ابزار به طور کلی یک لیست از لینک‌ها است، بنابراین استفاده از عناصر <ul> و <li> بسیار مفید خواهد بود:

مثال

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

آزمایش کنید

حالا، از لیست حذف کنید نشانه‌های لیست و حاشیه‌های بیرونی و داخلی (پرکننده):

مثال

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

آزمایش کنید

توضیح مثال:

  • list-style-type: none; - حذف نشانه‌های لیست. نوار ناوبری نیازی به نشانه‌های لیست ندارد.
  • تنظیم margin: 0; و padding: 0; تنظیمات پیش‌فرض مرورگر را حذف کنید.

کد مورد استفاده در مثال‌های بالا برای ناوبری عمودی و افقی است، که در فصل بعدی بیشتر درباره آن یاد خواهید گرفت.