נעשה שימוש בתפריט עם קטעי תפריט משנה נפתחים בפריסת האתר על מנת להציג בצורה ברורה יותר את מבנה החלקים ותתי החלקים, תוך חיסכון במקום הדף. לא כל כך קשה ליישם מנגנון כזה: אחת מדוגמאות היישום מובאת במאמר.
הוראות
שלב 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 פיקסלים;
גבול: 1px כסף מלא;
רקע: לבן;
סגנון רשימה: אין;
}
li {
מיקום: קרוב משפחה;
ריפוד: 1px;
צבע רקע: כסף;
אינדקס z: 9;
}
li.folder {רקע-צבע: כסף;}
li.folder ul {
עמדה: מוחלט;
משמאל: 111 פיקסלים; / * IE בלבד * /
למעלה: 5 פיקסלים;
}
li.folder> ul {left: 140px;} / * עבור אחרים * /
a {
ריפוד: 2 פיקסלים;
גבול: 1px לבן מלא;
קישוט טקסט: אין;
צבע שחור;
מודגש;
רוחב: 100%; / * עבור IE * /
}
li> a {רוחב: אוטומטי;} / * לאחרים * /
לי א {
בלוק תצוגה;
רוחב: 140 פיקסלים;
}
li a.submenu {
צבע רקע: צהוב;
}
/ * פרקים * /
a: רחף {
גבול-צבע: אפור;
צבע רקע: אדום;
צבע שחור;
}
li.folder a: רחף {
צבע רקע: אדום;
}
/ * מקטעים * /
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 ישנים יותר * /
גוף {התנהגות: url ("csshover.htc");}
שלב 4
לאחר מכן צור דף נפרד שתוכנו מוצג למטה.
חלון. 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 _ / -] * on (רחף | פעיל | מיקוד)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {אינדקס: 0, רשימה: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {להחזיר this.list [(this.index ++)% זה. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , שיחות חוזרות: {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l = א. אורך; עבור (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.imports) {try {var b = a. יבוא; var l = b.length; עבור (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} לתפוס (securityException) {} } נסה {var c = a. כללים; var r = c.length; עבור (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: פונקציה (a, b) {var c = a.selectorText; אם (m.test (c)) {var d = a.style.cssText; var e = n.exec (c) [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)} }, תיקון: פונקציה (a, b, c, d) {נסה {var f = a.parentNode.currentStyle [d]; a.style [d] = f} לתפוס (e) {a.runtimeStyle [d] = ''} אם (! a.csshover) {a.csshover = } אם (! a.csshover [c]) {a.csshover [c] = true; var g = CSSHoverElement חדש (a, b, c); this.elements.push (g)} להחזיר b}, לפרוק: פונקציה () {נסה {var l = this.elements.length; עבור (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; this.callbacks = {}} לתפוס (e) {}}}; var x = {onhover: {activator: 'onmouseenter', deactivator: 'onmouseleave'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; this.t ype = b; var d = RegExp חדש ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = פונקציה () {a.className + = '' + c}; this.deactivator = פונקציה () {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]. activator, 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 ()}); return function (a, b, c, d) {if (a) {return w.patch (a, b, c, ד)} אחר {w.init ()}}} ();
שלב 5
יש לשמור דף זה בשם csshover.htc ולהציב אותו באותו מקום כמו העמוד הראשי.
