منوهای کشویی با CSS
نوار ناوبری پیوندها را در یک ردیف چید. dropdown یک پنل تو در تو اضافه می‌کند که زیر محرک باز می‌شود — معمولاً با hover، و بهتر است وقتی فوکوس صفحه‌کلید داخلش است هم باز بماند. قبل از اختراع mega-menu غول‌آسا، یک الگوی آرام CSS را مسلط شوید.
جعبهٔ ابزار dropdown
📊 dropdown یک‌نگاهه
| قطعه | کار روزمره |
|---|---|
| محرک relative | li پدر (یا پوشش) لنگر جای‌گذاری می‌شود |
| پنل absolute | منوی تو در تو زیر محرک می‌نشیند (top: 100%) |
| پنهان پیش‌فرض | تا باز شدن display: none یا بیرون صفحه |
باز شدن :hover |
نشانگر پنل را باز می‌کند |
:focus-within |
کاربر صفحه‌کلید هنگام tab می‌تواند پنل را باز/باز نگه دارد |
z-index |
پنل باز را بالای محتوای بعدی صفحه نگه می‌دارد |
dropdown فقطCSS یک کلاسیک آموزشی است. محصول واقعی اغلب برای کلیک لمسی، Escape و دسترسی‌پذیری غنی‌تر JS اضافه می‌کند — اول اسکلت CSS را اینجا یاد بگیرید.
محرک relative، لیست تو در تو
پیوند محرک را در نوار بالا نگه دارید و برای زیرمنو یک لیست دوم تو در تو بسازید. آیتم پدر باید position داشته باشد تا فرزند absolute خانه‌اش را بداند.
.nav > li {
position: relative;
}
.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
پنل absolute زیر محرک
زیرمنو را با position: absolute بگذارید، به پایین محرک بچسبانید، و پس‌زمینهٔ توپر بدهید تا متن صفحه از زیر نزند.
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
تا باز شدن پنهان بماند
پنل را پیش‌فرض بسته بگذارید. باز بودن همه‌چیز از اول، dropdown را بی‌معنا می‌کند.
.nav .submenu {
display: none;
}
با hover باز شود
وقتی نشانگر روی آیتم پدر است، پنل را نشان دهید. padding روی محرک کمک می‌کند لبه‌ها تصادفی بسته نشوند.
.nav > li:hover > .submenu {
display: block;
}
focus-within را هم ترجیح دهید
فقط hover برای صفحه‌کلید کافی نیست. :focus-within وقتی فوکوس داخل آیتم است پنل را باز نگه می‌دارد — ارتقای آرام CSS.
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
عادت آرام dropdown
پدر relative، پنل absolute، پنهان پیش‌فرض، hover + focus-within، z-index معقول. toggle کلیکی mega-menu و ARIA پیچیده را برای الگوهای غنی‌تر بعد بگذارید — با درس نوار ناوبری تخت قاطی نکنید.
.nav .submenu {
z-index: 20;
}
.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}
خودتان امتحان کنید
- هر
liسطح بالا راposition: relativeکنید. - لیست
.submenuتو در تو بسازید وabsolute; top: 100%; left: 0بدهید. - با
display: noneپنهان کنید، بعد باli:hoverنشان دهید. :focus-withinاضافه کنید تا فوکوس صفحه‌کلید هم پنل را باز کند.z-indexرا بالا ببرید و بنویسید کی برای کلیک لمسی JS می‌آورید.
اشتباه‌های رایج
- زیرمنو absolute بدون پدر relative (پنل دور می‌پرد)
- رها کردن زیرمنو پیش‌فرض نمایان
- حذف استایل فوکوس تا کاربر صفحه‌کلید گم شود
- ساختن mega-menu کامل JS قبل از یادگیری این اسکلت CSS
- دیدن dropdown مثل درس کل چیدمان صفحه
جمع‌بندی
- dropdown پنلی تو در تو زیر محرک relative است
- absolute به‌علاوهٔ
top: 100%منو را زیر پیوند می‌چسباند - پیش‌فرض پنهان؛ با hover و focus-within باز کنید
- با z-index پنل را روی محتوای صفحه نگه دارید
- نوار تخت اول آمد؛ منوی تو در تو این درس است
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود