يتم استخدام قائمة بأقسام قائمة فرعية منسدلة في تخطيط الموقع من أجل تقديم هيكل الأقسام والأقسام الفرعية بشكل أكثر وضوحًا ، مع توفير مساحة الصفحة. ليس من الصعب تنفيذ مثل هذه الآلية: تم تقديم أحد أمثلة التنفيذ في المقالة.
تعليمات
الخطوة 1
أدناه هو رمز المصدر الكامل للصفحة. يتم وضع أوصاف الأنماط مباشرة في نص الصفحة. لا يحتوي HTML ولا css لهذا البديل من تنفيذ القائمة على أي تركيبات معقدة تتطلب شرحًا تفصيليًا.
الخطوة 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
قائمة منسدلة بسيطة مع أقسام فرعية
* {
عائلة الخطوط: arial ؛
حجم الخط: 16 بكسل ؛
}
/ * لمتصفحات IE الأقدم * /
الجسم {السلوك: url ("csshover.htc")؛}
ul ، li ، a {
العرض محجوب؛
الهامش: 0؛
حشوة: 0 ؛
الحدود: 0؛
}
ul {
العرض: 150 بكسل ؛
الحدود: 1 بكسل من الفضة الصلبة ؛
الخلفية: أبيض ؛
نمط القائمة: لا شيء ؛
}
لي {
الموقف: نسبي ؛
الحشو: 1 بكسل ؛
لون الخلفية: فضي ؛
مؤشر z: 9 ؛
}
li.folder {background-color: silver؛}
li.folder ul {
الموقف: مطلق.
اليسار: 111 بكسل ؛ / * IE فقط * /
أعلى: 5 بكسل ؛
}
li.folder> ul {left: 140px؛} / * للآخرين * /
أ {
الحشو: 2 بكسل ؛
الحدود: 1 بكسل بيضاء صلبة ؛
زخرفة النص: لا شيء ؛
لون أسود؛
وزن الخط: عريض ؛
العرض: 100٪؛ / * لـ IE * /
}
li> a {width: auto؛} / * للآخرين * /
لي {
العرض محجوب؛
العرض: 140 بكسل ؛
}
li a.submenu {
لون الخلفية: أصفر.
}
/ * الفصول * /
أ: تحوم {
لون الحدود: رمادي.
لون الخلفية: أحمر ؛
لون أسود؛
}
li.folder a: مرر {
لون الخلفية: أحمر ؛
}
/ * الأقسام * /
li.folder: hover {z-index: 10؛}
ul ul، li: hover ul ul {display: none؛}
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
إذا كنت تريد استخدام الخيار لدعم تعديلات المتصفح القديمة بالفعل ، فيجب إضافة سطر إضافي إلى كتلة وصف النمط (بعد ذلك مباشرة) (لا تحتاج إلى إضافة تعليق):
/ * لمتصفحات IE الأقدم * /
الجسم {السلوك: url ("csshover.htc")؛}
الخطوة 4
ثم قم بإنشاء صفحة منفصلة ، يظهر محتواها أدناه.
window. CSSHover = (الوظيفة () {var m = / (^ | / s) ((([^ a] ([^] +)؟) | (a ([^ #.] [^] +) +)):(hover | active | focus)) / i؛ var n = / (. *؟):(hover | active | focus) / i؛ var o = / [^:] +: ([az / -] +). * / i؛ var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi؛ var q = / \. ([a-z0-9 _ / -] * تشغيل (التمرير | نشط | التركيز)) / i ؛ var s = / msie (5 | 6 | 7) / i ؛ var t = / backcompat / i ؛ var u = {index: 0، list: ['text-kashida'، 'text-kashida-space'، 'text-justify']، get: function () {return this.list [(this.index ++)٪ this. list.length]}}؛ var v = function (c) {return c.replace (/-(.)/ mg، function (a، b) {return b.toUpperCase ()})}؛ var w = {element: ، عمليات الاسترجاعات: {} ، init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets ، l = a.length؛ for (var i = 0؛ i <l؛ i ++) {this.parseStylesheet (a )}} ، parseStylesheet: function (a) {if (a.imports) {try {var b = a. import؛ var l = b.length؛ for (var i = 0؛ i <l؛ i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } جرب {var c = a. rules؛ var r = c.length؛ for (var j = 0؛ j <r؛ j ++) {this.parseCSSRule (c [j]، a)}} ca tch (someException) {}}، parseCSSRule: function (a، b) {var c = a.selectorText؛ if (m.test (c)) {var d = a.style.cssText؛ var e = n.exec (ج) [1]؛ var f = c.replace (o، 'on $ 1')؛ var g = c.replace (p، '. $ 2' + f)؛ var h = q.exec (g) [1]؛ var i = e + h؛ if (! this.callbacks ) {var j = u.get ()؛ var k = v (j)؛ b.addRule (e، j + ': expression (CSSHover (هذا ، "'+ f +'" ، "'+ h +'" ، "'+ k +'")) ') ؛ this.callbacks = true} b.addRule (g، d)} }، patch: function (a، b، c، d) {try {var f = a.parentNode.currentStyle [d]؛ a.style [d] = f} catch (e) {a.runtimeStyle [d] = ''} if (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true؛ var g = new CSSHoverElement (a، b، c) ؛ this.elements.push (g)} return b}، unload: function () {try {var l = this.elements.length؛ for (var i = 0؛ i <l؛ i ++) {this.elements .unload ()} this.elements = ؛ this.callbacks = {}} catch (e) {}}}؛ var x = {onhover: {activator: 'onmouseenter'، deactivator: 'onmouseleave'} ، onactive: {activator: 'onmousedown'، deactivator: 'onmouseup'}، onfocus: {activator: 'onfocus'، deactivator: 'onblur'}}؛ الوظيفة CSSHoverElement (a، b، c) {this.node = a؛ هذا t ype = b ؛ var d = RegExp جديد ('(^ | / s)' + c + '(s | $)'، 'g') ؛
this.activator = function () {a.className + = '' + c}؛ this.deactivator = function () {a.className = a.className.replace (d، '')}؛ a.attachEvent (x [ب].activator، this.activator)؛ a.attachEvent (x .deactivator، this.deactivator)} CSSHoverElement.prototype = {unload: function () {this.node.detachEvent (x [this.type]. المنشط ، this.activator) ؛ this.node.detachEvent (x [this.type].deactivator، this.deactivator)؛ this.activator = null؛ this.deactivator = null؛ this.node = null؛ this.type = null }}؛ window.attachEvent ('onbeforeunload'، function () {w.unload ()})؛ دالة الإرجاع (a، b، c، d) {if (a) {return w.patch (a، b، c ، d)} else {w.init ()}}}) () ؛
الخطوة الخامسة
يجب حفظ هذه الصفحة باسم csshover.htc ووضعها في نفس مكان الصفحة الرئيسية.
