قائمة المنسدلة CSS النقية

Question

لقد كنت أعمل على تطبيق Facebook وأنت تعرف على JavaScript الأصلي على Facebook ، ولديهم تطبيق FBJs الخاص بهم وهو أمر مزعج عندما يتعلق الأمر بإنشاء أشياء مثل القوائم.

هل هنالك أي محلول CSS النقي بدون أي مشاركة في JavaScript (يتم استخدام JavaScript في جميع الحلول التي رأيتها لمعالجة IE6)؟

Answer 1

نعم ، هناك العديد من المواقع. القي نظرة على Listamatic.

هل يمكنك أخذ قائمة بسيطة واستخدام أوراق نمط متتالية مختلفة لإنشاء خيارات قائمة مختلفة بشكل جذري؟ يعرض Listamatic قوة CSS عند تطبيقه على قائمة واحدة بسيطة.

هناك كل من القوائم الرأسية والبغيري ، باستخدام CSS النقي.

بعض أمثلة العمل:

1. http://www.xs4all.nl/~peterned/examples/cssmenu.html
2. http://www.tjkdesign.com/articles/dropdown/demo.asp

في الواقع ، يمكنك تنفيذ قائمة أساسية مع أسطر قليلة:

li ul { display: none; } 
li:hover > ul { display: block; }

لاحظ أنك تحتاج إلى JavaScript إذا كنت تدعم IE6 (كما لا تعمل مع Li: Hover).

Answer 2

بدأت Google مؤخرًا التخلص التدريجي من دعم IE6 وأبلغت تطبيقاتهم لعملاء المجال لترقية مستخدميهم. ما لم تقم بخدمة سوق أو قاعدة عملاء تعرفها ، تستخدم IE6 ولا تستطيع الترقية أو غير راغبة في الترقية ، فأنا أتجاهله واستخدام: حل Hover Sans JavaScript.