از منویی با بخشهای منوی کشویی در طرح بندی سایت استفاده می شود تا ساختار بخشها و زیرمجموعه ها ضمن صرفه جویی در فضای صفحه ، با وضوح بیشتری ارائه شود. اجرای چنین مکانیسمی چندان دشوار نیست: یکی از نمونه های اجرای آن در مقاله آورده شده است.
دستورالعمل ها
مرحله 1
در زیر کد منبع کامل صفحه آورده شده است. توصیف سبک ها مستقیماً در متن صفحه قرار می گیرند. نه html و نه css این نوع از پیاده سازی منو شامل ساختارهای پیچیده ای نیست که نیاز به توضیح دقیق داشته باشد.
گام 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
منوی کشویی ساده با زیرمجموعه ها
* {
font-family: arial؛
اندازه قلم: 16px؛
}
/ * برای مرورگرهای قدیمی اینترنت اکسپلورر * /
body {رفتاری: url ("csshover.htc")؛}
اول ، لی ، یک {
نمایش: بلوک؛
حاشیه: 0؛
بالشتک: 0؛
حاشیه: 0؛
}
اول {
عرض: 150 پیکسل
حاشیه: نقره جامد 1 پیکسل؛
زمینه: سفید؛
سبک لیست: هیچ؛
}
لی {
موقعیت: نسبی؛
بالشتک: 1px؛
رنگ پس زمینه: نقره ای
z-index: 9؛
}
li.folder {background-color: silver؛}
li.folder ul {
موقعیت: مطلق؛
سمت چپ: 111px؛ / * فقط اینترنت اکسپلورر * /
بالا: 5px؛
}
li.folder> ul {سمت چپ: 140px؛} / * برای دیگران * /
آ {
بالشتک: 2px؛
حاشیه: 1px جامد سفید؛
دکوراسیون متن: هیچ؛
رنگ سیاه؛
font-weight: پررنگ؛
عرض: 100٪ / * برای IE * /
}
li> a {width: auto؛} / * برای دیگران * /
لی یک {
نمایش: بلوک؛
عرض: 140 پیکسل؛
}
li a.submenu {
background-color: yellow؛
}
/ * فصل * /
a: شناور {
حاشیه رنگ: خاکستری؛
background-color: قرمز؛
رنگ سیاه؛
}
پوشه a: شناور {
background-color: قرمز؛
}
/ * بخشها * /
li.folder: شناور {z-index: 10؛}
ul ul، li: hover ul ul {display: none؛}
li: شناور ul ، li: شناور li: شناور 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 قدیمی * /
body {رفتاری: url ("csshover.htc")؛}
مرحله 4
سپس یک صفحه جداگانه ایجاد کنید که محتوای آن در زیر نشان داده شده است.
window. CSSHover = (تابع () {var m = / (^ | / s) ((([^ a] ([^] +)؟) | (a ([^ ^.] [^] +) +))):(شناور | فعال | تمرکز)) / i ؛ var n = / (. *؟):(شناور | فعال | تمرکز) / 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']، دریافت: 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 = {عناصر: ، callbacks: {} ، 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: تابع (a) {if (a.imports) {try {var b = a. imports؛ 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: تابع (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 + ': عبارت (CSSHover (این ، "'+ f +'" ، "'+ h +'" ، "'+ k +'"))) ")؛ this.callbacks = true} b.addRule (g، d)} } ، patch: تابع (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.element.push (g)} return b}، unload: function () {try {var l = this.element.length؛ for (var i = 0؛ i <l؛ i ++) {this.element ها .unload ()} this.element = ؛ this.callbacks = {}} catch (e) {}}}؛ var x = {onhover: {activator: 'onmouseenter'، غیرفعال: 'onmouseleave'} ، onactive: {activator: 'onmousedown'، deactivator: 'onmouseup'}، onfocus: {activator: 'onfocus'، deactivator: 'onblur'}}؛ عملکرد CSSHoverElement (a، b، c) {this.node = a؛ این ype = b؛ var d = new 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.node.detachEvent (x [this.type].deactivator، this.deactivator)؛ this.activator = null؛ this.deactivator = null؛ this.node = null؛ this.type = null }}؛ window.attachEvent ('onbeforeunload'، تابع () {w.unload ()})؛ بازگشت عملکرد (a، b، c، d) {if (a) {return w.patch (a، b، c) ، د)} دیگری {w.init ()}}})) ()؛
مرحله 5
این صفحه باید با نام csshover.htc ذخیره شود و در همان مکان صفحه اصلی قرار گیرد.
