የገጽ ቦታን በማስቀመጥ ላይ የቁልፍ ንዑስ ምናሌ ክፍሎችን የያዘ ምናሌ በጣቢያ አቀማመጥ ላይ የበለጠ ጥቅም ላይ ይውላል ፡፡ እንዲህ ዓይነቱን ዘዴ ለመተግበር በጣም ከባድ አይደለም-ከአፈፃፀም ምሳሌዎች አንዱ በጽሁፉ ውስጥ ተሰጥቷል ፡፡
መመሪያዎች
ደረጃ 1
የገጹ የተሟላ የመረጃ ኮድ ከዚህ በታች ይገኛል ፡፡ የቅጦች መግለጫዎች በቀጥታ በገጹ ጽሑፍ ውስጥ ይቀመጣሉ ፡፡ የዚህ የምናሌ አተገባበር ልዩነት ኤች.ቲ.ኤም.ኤል ወይም ሲ.ኤስ.ኤም ዝርዝር ማብራሪያ የሚሹ ውስብስብ ግንባታዎችን አልያዘም ፡፡
ደረጃ 2
<! DOCTYPE html ህዝባዊ "- // W3C // DTD XHTML 1.0 ሽግግር // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ከቀላል ንዑስ ክፍሎች ጋር ቀላል ተቆልቋይ ምናሌ
* {
ቅርጸ-ቁምፊ-ቤተሰብ: arial;
ቅርጸ-ቁምፊ-16 ፒክስል;
}
/ * ለድሮ IE አሳሾች * /
አካል {ባህሪይ url ("csshover.htc");}
ul, li, a {
ማሳያ: ብሎክ;
ህዳግ: 0;
መቅዘፊያ: 0;
ድንበር: 0;
}
ኡል {
ስፋት: 150px;
ድንበር: 1 ፒክስል ጠንካራ ብር;
ዳራ: ነጭ;
ዝርዝር-ዘይቤ;
}
li {
አቀማመጥ: ዘመድ;
መቅዘፊያ: 1 ፒክስል;
የጀርባ-ቀለም: ብር;
z-index: 9;
}
li.folder {background-color: silver;}
li.folder ul {
አቀማመጥ: ፍጹም;
ግራ 111 ፒክስል; / * IE ብቻ * /
ከላይ: 5 ፒክስል;
}
li.folder> ul {left: 140px;} / * ለሌሎች * /
አንድ {
መቅዘፊያ: 2px;
ድንበር: 1 ፒክስል ጠንካራ ነጭ;
ጽሑፍ-ማጌጫ-የለም;
ቀለም: ጥቁር;
ቅርጸ-ቁምፊ-ክብደት-ደፋር;
ስፋት 100%; / * ለ IE * /
}
li> a {width: auto;} / * ለሌሎች * /
li a {
ማሳያ: ብሎክ;
ስፋት 140px;
}
li a.submenu {
የጀርባ-ቀለም-ቢጫ;
}
/ * ምዕራፎች * /
አንድ: ማንዣበብ {
የድንበር-ቀለም-ግራጫ;
የጀርባ-ቀለም: ቀይ;
ቀለም: ጥቁር;
}
li.fol a: ማንዣበብ {
የጀርባ-ቀለም: ቀይ;
}
/ * ክፍሎች * /
li.folder: ማንዣበብ {z-index: 10;}
ul ul, li: ማንዣበብ ul ul ul {ማሳያ: የለም;}
li: hover ul, li: hover 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 _ / -] * ላይ (ማንዣበብ | ገባሪ | ትኩረት)) / 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 () {መመለስ this.list [(this.index ++)% this. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {አባሎች: ፣ መልሶ መደወሎች ፦ {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l = a. ርዝመት; ለ (var i = 0; i <l; i ++) {this.parseStylesheet (a )}} ፣ parseStylesheet: function (a) {if (a.imports) {try {var b = a. አስመጪዎች; var l = b.longitude; ለ (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: function (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (ሐ) [1] ፣ var f = c. ቦታ (o, 'በ $ 1'); var g = c.replace (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; (! ይህ መልሶች (i)) {var j = u.get (); var k = v (j); b.addRule (e, j + ': expression (1); CSSHover (ይህ ፣ "'+ f +'" ፣ "'+ h +'", "'+ k +'")))); ይህ. ጥሪዎችን መልሱ = 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] = ''} ከሆነ (! a.csshover) {a.csshover = } ከሆነ (! a.csshover [c]) {a.csshover [c] = እውነት ፤ var g = አዲስ CSSHoverElement (a, b, c) ፤ this.elements.push (g)} መመለስ ለ} ፣ አውርድ ተግባር () {ይሞክሩ {var l = this.elements.length; ለ (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; this.callbacks = {}} መያዝ (ሠ) {}}}; var x = {onhover: {activator: 'onmouseenter', deactivator: 'onmouseleave'} ፣ ንቁ ያልሆነ: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}, function CSSHoverElement (a, b, c) {this.node = a; ይህ 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 [1] b].activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {unload: function () {this.node.detachEvent (x [this.type] አክቲቪተር ፣ ይህ አከናዋኝ); ይህ. node.detachEvent (x [this.type]. deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; }}; የዊንዶውስ.attachEvent ('onbeforeunload', function () {w.unload ()}); የመመለስ ተግባር (a, b, c, d) {if (a) {return w.patch (a, b, c ፣ መ)} ሌላ {w.init ()}}}) ();
ደረጃ 5
ይህ ገጽ በ csshover.htc ስም መቀመጥ እና ከዋናው ገጽ ጋር በተመሳሳይ ቦታ መቀመጥ አለበት።
