كيف يمكنني إنشاء قائمة بتنسيق HTML دون استخدام Javascript؟

Question

منذ سنوات عديدة، أصبح معيار واجهة المستخدم الرسومية (GUI) هو أشرطة قوائم التطبيقات التي تحتوي على قوائم منبثقة، إذا قمت بالنقر أو التمرير فوق أي إدخال في شريط القائمة.تطبق بعض مواقع الويب هذه الميزة أيضًا، ولكنها تستخدم Javascript، حسب ما أستطيع رؤيته.لأسباب مختلفة يمكن أن تكون جافا سكريبت مشكلة، لذا فإن السؤال:هل من الممكن تنفيذ ذلك بدون جافا سكريبت، فقط باستخدام HTML وCSS؟

Answer 1

ولقد فعلت شيئا مثل هذا من قبل، وانها انسحبت خدعة من خلال وضع عناصر القائمة في العلامات مرساة، مع قوائم فرعية في عناصر div مخبأة داخل تلك العلامات مرساة. خدعة CSS هي لجعل شعبة الداخلي تظهر خلال ل: حدث تحوم

ويبدو شيئا مثل:

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

وقد تختلف الأميال الخاص بك ...

وتحرير: إنترنت إكسبلورر 6 و أقل لا يدعم: تحوم فئة مزيفة على عناصر أخرى إلى جانب A. في المزيد من برامج التصفح الحديثة، ومن المتفق عليه أن يكون قادرا على استخدام هذه الحيلة مع LI، TD، DIV، SPAN وأكثر من أي علامة.

Answer 2

وإلقاء نظرة على CSS القائمة صانع .

Answer 3

وتقنية أشهرها هو suckerfish القوائم . سوف تبحث عن التي ينتج عنها الكثير من القائمة ومثيرة للاهتمام. فإنه يحتاج فقط جافا سكريبت في IE6 وأقل من ذلك.

وفيما يلي قائمة من أبناء القوائم suckerfish.

Answer 4

والنظر في استخدام الأساليب CSS على سبيل الاحتياط لحين جافا سكريبت غير متوفر. يمكن جافا سكريبت * توفير تجربة أفضل للمستخدم عن القوائم المنسدلة لأنه يمكنك إضافة بعض عوامل تأخير لوقف القوائم تختفي على الفور في حالة ترك الماوس لفترة وجيزة منطقة تحوم بهم. القوائم نقية CSS يمكن أن يكون في بعض الأحيان قليلا صعب للاستخدام، خاصة إذا كانت أهداف تحوم صغيرة.

*: بالطبع، ليست كل النصوص القائمة يزعج فعلا للقيام بذلك ...

Answer 5

ويمكنك استخدام pseudoclass: تحوم للحصول على تأثير تحوم

.

a:link {
 color: blue;
}

a:hover {
  color: red;
}

وأستطيع أن أعطي مثالا أكثر اتساعا ولكن ليس في الوقت الحالي (بحاجة للحصول على الأطفال إلى طبيب الأسنان).

Answer 6

هناك ايضا إريك مايرالمقال الأصلي عن قوائم CSS خالصة.

لا بد أن يكون هناك المزيد من اللقطات القوية والحديثة التي ذكرها الآخرون الآن، لكنني اعتقدت أنني سأذكرها للأجيال القادمة.:)