تُستخدم القوائم المنسدلة في صفحات الموقع لتوفير مساحة وتقديم عرض تقديمي منطقي لهيكل مورد الويب. هناك العديد من الطرق لتنفيذ هذا العنصر ، وأحد أبسطها يرد أدناه.
انه ضروري
معرفة أساسية بلغات HTML و CSS
تعليمات
الخطوة 1
تستخدم شفرة HTML الخاصة بالقائمة عناصر قائمة متداخلة (UL و LI) ، يتم وضع روابط الصفحات داخلها. لا يحتوي على أي هياكل معقدة. يتم تنفيذ الديناميكيات عن طريق CSS ، حيث يتم وضع كتلة الوصف مباشرة في الكود المصدري للصفحة. لا يوجد شيء مميز حوله ، بالإضافة إلى أن النص يحتوي على بعض التفسيرات لغرض بعض كتل الأنماط.
الخطوة 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
القائمة المنسدلة * {
عائلة الخطوط: Verdana؛
حجم الخط: 14 بكسل ؛
} ul، li، a {
حشوة: 0 ؛
العرض محجوب؛
الحدود: 0؛
الهامش: 0؛
} ul {
الحدود: 1 بكسل صلب # AAA ؛
العرض: 150 بكسل ؛
نمط القائمة: لا شيء ؛
الخلفية: #FFF ؛
} لي {
لون الخلفية: #AAA ؛
الموقف: نسبي ؛
مؤشر z: 9 ؛
الحشو: 1 بكسل ؛
}
li.folder {لون الخلفية: #AAA؛}
li.folder ul {
الموقف: مطلق.
أعلى: 5 بكسل ؛
اليسار: 111 بكسل ؛ / * لمتصفحات IE * /
}
li.folder> ul {left: 140px؛} / * للمتصفحات الأخرى * / a {
الحشو: 2 بكسل ؛
الحد: 1 بكسل صلب #FFF ؛
زخرفة النص: لا شيء ؛
العرض: 100٪؛ / * لمتصفحات IE * /
اللون: # 000 ؛
وزن الخط: عريض ؛
}
li> a {width: auto؛} / * للمتصفحات الأخرى * / li a {
العرض: 140 بكسل ؛
العرض محجوب؛
} li a.submenu {
لون الخلفية: أصفر.
} / * روابط * /
أ: تحوم {
لون الحدود: رمادي.
لون الخلفية: # FF0000 ؛
لون أسود؛
}
li.folder a: مرر {
لون الخلفية: # FF0000 ؛
} / * المجلدات * /
ul ul، li: hover ul ul {display: none؛}
li.folder: hover {z-index: 10؛}
li: hover ul، li: hover li: hover ul {display: block؛}
- 1 صفحة
-
2. مجلد
- 2.1 صفحة
-
2.2 مجلد
- 2.2.1 الصفحة
- 2.2.2 الصفحة
- 2.2.3 الصفحة
- 2.3 صفحة
-
3. مجلد
- 3.1 صفحة
- 3.2 صفحة
- 3.3 صفحة
- 4. الصفحة
الخطوه 3
يمكنك إضافة دعم للإصدارات القديمة من متصفحات Internet Explorer إلى هذا الرمز - يتم تنفيذه باستخدام JavaScript (بواسطة Peter Nederlof). تحتاج إلى تنزيل الملف بالرمز المطلوب ، على سبيل المثال ، من هذا الرابط - https://peterned.home.xs4all.nl/htc/csshover3.htc. يجب وضعها في نفس المجلد مثل الصفحة الرئيسية. وفي وصف أنماط الصفحة الرئيسية ، أضف رابطًا إليها - يمكن وضعه مباشرةً بعد علامة نمط الفتح: / * لمتصفحات IE القديمة *
الجسم {السلوك: url ("csshover3.htc")؛}
