CSSالقوائم المنسدلة
- مفهوم القوائم المنسدلة
- أساسيات بناء القائمة المنسدلة
- تحديد جهة ظهور القائمة المنسدلة
- تحديد نوع المحتوى القائمة المنسدلة
مفهوم القوائم المنسدلة
القائمة المنسدلة ( Dropdown Menu ) عبارة عن قائمة مخفية تظهر عند تمرير الماوس فوق شيء موضوع في الصفحة. فمثلاً قد تكون القائمة المنسدلة تظهر عند النقر على نص، زر، صورة، أو تكون قائمة الموقع الرئيسية تتضمن قوائم داخلية منسدلة.
أساسيات بناء القائمة المنسدلة
لبناء قائمة منسدلة نحتاج عنصر يكون بمثابة حاوية لها و للعنصر الذي يظهرها حين تم تمرير الماوس فوقه و نعطيه الخاصية position: relative; لكي نستطيع تحديد مكان ظهور القائمة عند تمرير الماوس فوق العنصر.
القائمة نعطيها الخاصية position: absolute; فقط لكي تظهر تحت العنصر مباشرةً.
لجعل القائمة بالأساس مخفية نعطيها الخاصية display: none; و لجعلها تظهر عندما يكون الماوس فوق الحاوية الأساسية نعطيها الخاصية display: block; و هكذا حين يكون الماوس فوق العنصر المسؤول عن إظهار القائمة و حين يكون فوق عناصر القائمة نفسها أيضاً فإن القائمة ستظل ظاهرة.
في المثال التالي قمنا ببناء قائمة منسدلة تظهر تحت العنصر عندما يتم تمرير الماوس عليه.
مثال
تحديد جهة ظهور القائمة المنسدلة
لتحديد مكان ظهور محتوى القائمة يمكننا استخدام الخصائص top، right، left، bottom.
في المثال التالي قمنا بجعل محتوى القائمة المنسدلة يظهر في الأسفل من الجهة اليمنى.
تحديد نوع المحتوى القائمة المنسدلة
يمكنك جعل القائمة المنسدلة تحتوي ما تريده، فمثلاً يمكنك جعلها تحتوي صورة، نص عادي، جدول إلخ..
في المثال التالي قمنا ببناء قائمة منسدلة تعرض الصورة الأساسية الموضوعة فيا بشكل أكبر مع إظهار وصف للصورة أيضاً أسفل منها.
مثال
في المثال التالي قمنا ببناء قائمة منسدلة بداخل القائمة الرئيسية.
مثال
وضعنا <a href="javascript:void(0)"> لجعل المتصفح يرى الرابط كأنه نص عادي حتى لا تتحدث الصفحة عند النقر عليه.
في المثال التالي قمنا ببناء قوائم منسدلة متداخلة ( Nested Menus ) بداخل القائمة الرئيسية.
هذا النوع من القوائم قد يكون صعب الفهم بشكل كامل عليك في هذه اللحظة و هذا شيء طبيعي لأنها بطبيعتها معقدة و لكن لا تقلق مع الوقت ستجدها سهلة.