شرح صفوف ومحتوى الفقرة
راجع القائمة المرجعية المتكاملة التالية عند بناء أي قائمة منسدلة ثنائية اللغة بلغة 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 لبناء نماذج متجاوبة وميسرة باحترافية كاملة.