نوارهای هدایتی(Navigation Bars)

آسان بودن نقل و انتقال با لینک ها، در هر سایتی مهم است. با CSS می توانیم منوهای خسته کننده ی HTML را به منوهای جذابی تبدیل کنیم.

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

یک نوار هدایتی، در اصل به استاندارد HTML نیاز دارد. در این مثال ها، ما برای ایجاد نوار هدایتی، از لیست های(list) HTML استفاده می کنیم.  یک نوار هدایتی، در اصل یک لیست از لینک ها است؛ بنابراین استفاده از <ul> و <li> از اهمیت زیادی برخوردار است.

 <ul>
  <li><a href="#">خانه</a></li>
  <li><a href="#">اخبار</a></li>
  <li><a href="#">تماس با ما</a></li>
  <li><a href="#">درباره ما</a></li>
</ul> 

اکنون اجازه دهید دایره های توپر(bullet) و margin و padding را از لیست حذف کنیم :

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

توضیح مثال بالا

1. دستور list-style-type: none; دایره های توپر را حذف می کند. یک نوار هدایتی، به این علامت ها نیازی ندارد.

2. با استفاده از دستورات margin: 0; و padding: 0; باعث می شوند margin و padding پیش فرض مرورگر برای لیست حذف شوند.

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

• بعدی
• قبلی