نوار ناوبری با CSS
درس Layout نواحی صفحه را اسکچ کرد. نوار ناوبری همان نوار پیوند است که آدم‌ها را بین آن نواحی و صفحه‌ها جابه‌جا می‌کند. از لیست معنایی پیوند شروع کنید، ردیف آرام بچینید، بعد نشانهٔ hover بگذارید — منوی تو در تو و dropdown را برای درس بعد نگه دارید.
جعبهٔ ابزار ناوبری
📊 ناوبری یک‌نگاهه
| قطعه | کار روزمره |
|---|---|
nav |
landmark برای پیوندهای اصلی/فرعی سایت |
ul / li / a |
لیست ساخت‌یافته مقصدها |
| ریست لیست | حذف گلوله و تورفتگی پیش‌فرض برای چیدمان نوار |
| ردیف افقی | Flex یا inline-block تا پیوندها کنار هم بنشینند |
| Hover / جاری | بازخورد نشانگر و «اینجا هستید» |
| ناوبری عمودی | همان لیست ستونی — مناسب سایدبار |
ناوبری هنوز پیوند است. outline فوکوس را نگه دارید، padding راحت بدهید، و معنا را داخل تودهٔ div بی‌نام پنهان نکنید.
لیست معنایی داخل nav
منو را در nav بپیچید و مقصدها را به‌صورت لنگر واقعی داخل لیست نگه دارید. خوانندهٔ صفحه و خودِ آینده‌تان از ساختار ممنون می‌شوند.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
نوار افقی با Flex
یک ردیف flex ساده لیست را به نوار تبدیل می‌کند. gap و padding بهتر از هدف لمسی تنگ است. (هنر عمیق‌تر Flexbox در ماژول‌های بعد است — برای navbar تمیز همین کافی است.)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
نشانهٔ hover و صفحهٔ جاری
روی hover بازخورد بدهید و صفحهٔ جاری را با کلاس علامت بزنید. هرگز :focus outline را به‌عنوان «تمیزکاری» برای همیشه برندارید.
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
ناوبری عمودی کناری
همان لیست می‌تواند در سایدبار ستون شود. فاصله را سخاوتمند بگذارید تا هر پیوند راحت زده شود.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
عادت آرام ناوبری
از nav + لیست + padding خوانا استفاده کنید. برای نوار افقی ردیف flex را ترجیح دهید. mega-menu و dropdown را برای درس بعد بگذارید. نوار پیوند را با اسکلت کامل چیدمان صفحه قاطی نکنید.
.site-nav { /* پوشش landmark */ }
.site-nav__list { /* همان ul */ }
.site-nav__link { /* هر a */ }
.site-nav__link.is-current { /* صفحهٔ فعال */ }
خودتان امتحان کنید
nav > ul.nav > li > aبسازید و استایل لیست را ریست کنید.- پیوندها را در ردیف افقی flex با padding و gap بچینید.
- استایل
:hoverو.is-currentاضافه کنید. - همان لیست را به‌صورت sidenav عمودی تکرار کنید.
- یک جمله بنویسید: چه چیزی مال درس Dropdowns است نه اینجا؟
اشتباه‌های رایج
- padding ریز که هدف لمسی و موس را خراب می‌کند
- حذف دائمی outline فوکوس
- تودهٔ div به‌جای
navو لیست - ساختن mega-menu تو در تو در همین درس
- دیدن navbar به‌عنوان کل چیدمان وب‌سایت
جمع‌بندی
- نوار ناوبری لیست ساخت‌یافتهٔ پیوند داخل
navاست - گلوله‌ها را ریست کنید، بعد با flex (یا inline-block) بچینید
- hover و حالت جاری راهنمایی می‌کنند بدون کشتن فوکوس
- ناوبری عمودی همان لیست ستونی است
- منوی dropdown برای درس بعد می‌ماند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود