نوار ناوبری (Navigation Bars)
«نوار ناوبری (Navigation Bar)» همان منوی سایت است. کاربر با آن می چرخد. معمولاً با فهرست HTML ساخته می شود. سپس با CSS خوشگل می شود. مثل منوی بازی که بین مرحله ها می پری.
پایه: فهرست لینک ها
نوار ناوبری در اصل یک فهرست لینک است. از <ul> و <li> استفاده کن.
<ul>
<li><a href="default.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>
تمیزکاری اولیه در CSS
نقاط لیست، فاصله ها و حاشیه های پیش فرض را حذف کن تا کنترل کامل داشته باشی.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
چرا همین کدها مهم اند؟
- list-style-type: none؛ گلوله های لیست حذف می شوند.
- margin: 0؛ حاشیه پیش فرض مرورگر صفر می شود.
- padding: 0؛ فاصله داخلی پیش فرض هم صفر می شود.
نکته: محل رایج نوار ناوبری بالای صفحه یا کنار صفحه است.
گام های عملی ساخت نوار ناوبری
- <ul> و <li> بساز و لینک ها را بنویس.
- روی <ul>، list-style، margin و padding را صفر کن.
- بعداً با چینش و رنگ، ظاهرش را تنظیم کن.
برای واکنش گراییِ نوار ناوبری سر بزن به بخش ریسپانسیو. همچنین چینش را با تراز کردن (Align) بهتر کن.
جمع بندی سریع
- نوار ناوبری یک فهرست لینک است.
- از <ul> و <li> شروع کن.
- margin و padding پیش فرض را صفر کن.
- ظاهر نهایی را با CSS بساز.
- بالا یا کنار صفحه قرار بده.