في هذا الدرس 7تصفّح المواضيع
تبدأ القائمة المنسدلة المتينة ببنية HTML دلالية نظيفة قبل كتابة سطر تنسيق واحد؛ إذ نضع شريط التنقل داخل وسم <nav> يضم قائمة رئيسية <ul class="nav-bar">، وندرج القائمة الفرعية <ul class="submenu"> مباشرة داخل عنصر الأب <li class="has-menu"> التابع لها.
يتيح تطبيق الصندوق المرن display: flex مع gap على القائمة الرئيسية رص الروابط العلوية أفقياً بانتظام، بينما يوفر احتواء العنصر الأب لقائمته الفرعية العلاقة الشجرية المباشرة اللازمة لفتح اللوحة بالأنماط الخالصة دون أي برمجة نصية.
لو بقيت القائمة الفرعية ضمن التدفق الطبيعي للمستند لأدى إظهارها إلى تمديد ارتفاع الشريط العلوي ودفع محتوى الصفحة بأكمله إلى الأسفل! ولكي تطفو اللوحة بسلاسة فوق المحتوى نمنح العنصر الأب .has-menu الخاصية position: relative ونمنح القائمة الفرعية .submenu التموضع المطلق position: absolute; top: 100%;.
كما يضمن تحديد طبقة تكديس موجبة مثل z-index: 20 مع عرض أدنى مريح min-width: 190px وظل ناعم box-shadow تمييز اللوحة العائمة بوضوح فوق البطاقات والعناوين الموجودة أسفلها.
.has-menu { position: relative; }
.submenu {
display: none;
position: absolute;
top: 100%;
inset-inline-start: 0;
min-width: 180px;
z-index: 20;
}
.has-menu:hover > .submenu { display: block; }تثبيت الإزاحة المادية left: 0 يحاذي القائمة بشكل سليم في الواجهات الإنجليزية، لكنه يخل بالمحاذاة في الواجهات العربية ذات الاتجاه من اليمين إلى اليسار وقد يدفع القوائم العريضة خارج الحافة اليمنى للشاشة.
أما الخاصية المنطقية inset-inline-start: 0 فتحل المشكلة للغتين بسطر واحد؛ إذ تحاذي القائمة مع الحافة اليسرى لعنصرها الأب بالإنجليزية ومع الحافة اليمنى بالعربية تلقائياً. وللقوائم الواقعة في أقصى نهاية الشريط كقائمة الحساب الشخصي نستخدم inset-inline-end: 0 لتمتد اللوحة نحو داخل الشاشة دون خروج.
الاعتماد على .has-menu:hover > .submenu وحده يحرم مستخدمي لوحة المفاتيح من فتح القائمة، وحتى استخدام :focus على الرابط الأب يفشل فور ضغط مفتاح Tab للانتقال إلى أول رابط فرعي؛ لأن الرابط الأب يفقد التركيز فتُغلق القائمة في وجه المستخدم!
يعالج دمج :hover مع الفئة الزائفة :focus-within على العنصر الأب .has-menu هذه المشكلة جذرياً؛ إذ تظل الحالة نشطة طوال وجود التركيز على الرابط الرئيسي أو أي رابط داخلي ضمن القائمة الفرعية، ثم تُغلق القائمة تلقائياً فور خروج مؤشر الجدولة من آخر عنصر فرعي.
.has-menu:hover > .submenu,
.has-menu:focus-within > .submenu {
opacity: 1;
visibility: visible;
}
.sub-link:focus-visible {
outline: 2px solid #7750b2;
}مختبر القوائم المنسدلة التفاعلي
التبديل بين display: none وdisplay: block يظهر اللوحة فجأة دون انتقال ناعم، بينما يترك الاكتفاء بـ opacity: 0 الروابط المخفية قابلة للنقر خطأً فوق محتوى الصفحة! لذلك يجمع النمط الاحترافي بين opacity: 0; visibility: hidden; transform: translateY(6px); عند الإغلاق والانتقال إلى opacity: 1; visibility: visible; transform: translateY(0); عند الفتح.
وتكتمل سلاسة الاستخدام بلمستين عبر العناصر الزائفة: رسم مؤشر سهم صغير عبر .trigger::after يدور بنعومة عند الفتح، وإضافة جسر تمرير خفي عبر .submenu::before بارتفاع 10px وأعلى سالب top: -10px ليسد المسافة الفاصلة بين الزر واللوحة فلا تنغلق القائمة أثناء مرور الفأرة فوق الفجوة.
.submenu {
top: calc(100% + 8px);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.submenu::before {
content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}قد يبدو فحص القائمة المنسدلة مربكاً في البداية لأن تحريك مؤشر الفأرة من الصفحة نحو نافذة أدوات المطور ينهي حالة :hover فيخفي القائمة فوراً! وتوفر المتصفحات حلاً مدمجاً داخل لوحة الأنماط؛ إذ يكفي تحديد العنصر الأب <li class="has-menu"> في شجرة العناصر ثم النقر على زر :hov وتفعيل خيار :hover أو :focus-within.
يبقي هذا التثبيت اللوحة المنسدلة مفتوحة باستمرار أمامك لتعديل الحشوات وتباين الألوان والظلال بدقة وسهولة.
راجع القائمة المرجعية المتكاملة التالية عند بناء أي قائمة منسدلة ثنائية اللغة بلغة CSS الخالصة:
| الركيزة | القاعدة القياسية الموصى بها | المشكلة التي تعالجها |
|---|---|---|
| العنصر الأب | position: relative على li.has-menu | تحديد نقطة المرجع لإحداثيات اللوحة الفرعية |
| اللوحة العائمة | position: absolute; top: 100%; z-index: 20 | منع دفع محتوى الصفحة إلى الأسفل عند الفتح |
| المحاذاة المنطقية | inset-inline-start: 0 | محاذاة يميناً بالعربية ويساراً بالإنجليزية تلقائياً |
| دعم لوحة المفاتيح | دمج :hover مع :focus-within | إبقاء القائمة مفتوحة أثناء التنقل بمفتاح Tab |
| الانتقال السلس | دمج opacity وvisibility وtransform | حركة ناعمة مع منع النقر الخاطئ وهي مغلقة |
| سد فجوة الفأرة | جسر خفي عبر .submenu::before | منع انغلاق القائمة عند عبور الفجوة الرأسية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
في ملخص الدرس أتقنت هيكلة القوائم المتداخلة دلالياً، وربط اللوحات العائمة بمحاذاة منطقية عبر inset-inline-start، ودعم التنقل بلوحة المفاتيح عبر :focus-within، وتحريك الظهور بسلاسة مع جسر الفأرة وفحص الحالات في أدوات المطور. وتتمثل الخطوة التالية في الانتقال إلى الدرس الختامي تنسيق النماذج وحقول الإدخال في لغة CSS لبناء نماذج متجاوبة وميسرة باحترافية كاملة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Focus-Within State حالة احتواء التركيز
- فئة زائفة تطابق الحاوية الأب طوال وجود مؤشر التركيز عليها أو على أي عنصر فرعي بداخلها.
- للمراجعة
- 02 Invisible Hover Bridge جسر التمرير الخفي
- شريط شفاف يولده العنصر الزائف ::before لسد الفجوة بين الزر واللوحة العائمة ومنع انقطاع حالة التمرير.
- للمراجعة
- 03 Logical Inline Start Offset الإزاحة السطرية البادئة
- استخدام خاصية inset-inline-start لمحاذاة القائمة المنسدلة يساراً بالإنجليزية ويميناً بالعربية تلقائياً.
- للمراجعة
- 04 Visibility-Guarded Fade تلاشي محمي بالرؤية
- دمج الشفافية مع خاصية الرؤية لكي تتلاشى القائمة بنعومة مع تعطيل النقر عليها تماماً وهي مخفية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 A11Y A11Y
- Accessibility
- هندسة إمكانية الوصول الشاملة التي تضمن فتح القوائم المنسدلة والتنقل بداخلها بمفتاح Tab تماماً كالفأرة.
- للمراجعة
- 02 LTR LTR
- Left-to-Right
- اتجاه الكتابة من اليسار إلى اليمين في الإنجليزية حيث تقابل البداية السطرية الحافة اليسرى تلقائياً.
- للمراجعة
- 03 NAV NAV
- Navigation Landmark
- وسم المعلم الدلالي المخصص في HTML لاحتواء قوائم التنقل الرئيسية والفرعية في الموقع.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
ادمج المحدد .has-menu:focus-within > .submenu مع حالة التمرير واضبط محاذاة اللوحة عبر inset-inline-start: 0.
-
حرك ظهور القائمة عبر الشفافية والرؤية والإزاحة الرأسية، واسدد فجوة 8px بشريط خفي مطلق عبر .submenu::before.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.