القوائم المنسدلة بـ CSS
أشرطة التنقل رتّبت الروابط في صف. القائمة المنسدلة تضيف لوحة متداخلة تفتح تحت محفّز — عادةً عند التحويم، والأفضل أيضًا عندما ينتقل تركيز لوحة المفاتيح داخلها. أتقن نمط CSS هادئًا واحدًا قبل اختراع قوائم عملاقة معقّدة.
مجموعة أدوات القائمة المنسدلة
📊 القوائم المنسدلة بنظرة سريعة
| القطعة | المهمة اليومية |
|---|---|
| محفّز relative | يصبح li الأب (أو الغلاف) مرساة التموضع |
| لوحة absolute | القائمة المتداخلة تجلس تحت المحفّز (top: 100%) |
| مخفية افتراضيًا | display: none أو خارج الشاشة حتى الفتح |
فتح :hover |
المؤشر يفتح اللوحة |
:focus-within |
مستخدمو لوحة المفاتيح يفتحون/يبقون اللوحة أثناء التبويب |
z-index |
يبقي اللوحة المفتوحة فوق محتوى الصفحة التالي |
القوائم المنسدلة بـ CSS فقط كلاسيكية تعليمية. المنتجات الحقيقية تضيف غالبًا JS لتبديل النقر على اللمس، والإغلاق بـ Escape، وإتاحة أغنى — تعلّم هيكل CSS هنا أولًا.
محفّز relative وقائمة متداخلة
أبقِ رابط المحفّز في الشريط العلوي وعشّ قائمة ثانية للقائمة الفرعية. يجب أن يكون عنصر الأب موضّعًا حتى تعرف الأبناء 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);
}
أخفِ حتى الفتح
اجعل اللوحة مغلقة افتراضيًا. فتح كل شيء دفعة واحدة يلغي معنى القائمة المنسدلة.
.nav .submenu {
display: none;
}
افتح عند التحويم
عندما يستقر المؤشر على عنصر الأب، أظهر اللوحة. الـ padding على المحفّز يساعد على تجنب الإغلاق العرضي عند الحافة.
.nav > li:hover > .submenu {
display: block;
}
فضّل focus-within أيضًا
التحويم وحده يخذل مستخدمي لوحة المفاتيح. :focus-within يبقي اللوحة مفتوحة بينما التركيز داخل العنصر — ترقية CSS هادئة.
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
عادة قائمة منسدلة هادئة
أب relative، لوحة absolute، مخفية افتراضيًا، hover + focus-within، وz-index معتدل. اترك تبديل النقر والقوائم العملاقة و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 (اللوحة تقفز بعيدًا)
- ترك القائمة الفرعية ظاهرة افتراضيًا
- إزالة أنماط التركيز فيضيع مستخدمو لوحة المفاتيح
- بناء قائمة عملاقة بـ JS كاملة قبل تعلّم هيكل CSS هذا
- معاملة القوائم المنسدلة كدرس تخطيط الصفحة كله
ملخص
- القوائم المنسدلة تعشّش لوحة تحت محفّز relative
- Absolute +
top: 100%يثبّت القائمة أسفل الرابط - أخفِ افتراضيًا؛ افتح بـ hover وfocus-within
- استخدم z-index لتغطي اللوحة محتوى الصفحة
- أشرطة التنقل المسطّحة جاءت أولًا؛ القوائم المتداخلة هي هذا الدرس
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى