Ang isang menu na may mga drop-down na seksyon ng submenu ay ginagamit sa layout ng site upang mas malinaw na maipakita ang istraktura ng mga seksyon at mga subseksyon, habang nagse-save ng puwang ng pahina. Hindi napakahirap ipatupad ang naturang mekanismo: ang isa sa mga halimbawa ng pagpapatupad ay ibinibigay sa artikulo.
Panuto
Hakbang 1
Nasa ibaba ang kumpletong source code ng pahina. Ang mga paglalarawan ng mga istilo ay inilalagay nang direkta sa teksto ng pahina. Ni ang html o ang css ng variant na ito ng pagpapatupad ng menu ay naglalaman ng anumang mga kumplikadong konstruksyon na nangangailangan ng detalyadong paliwanag.
Hakbang 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Simpleng dropdown menu na may mga subseksyon
* {
font-family: arial;
laki ng font: 16px;
}
/ * para sa mas matandang mga browser ng IE * /
katawan {pag-uugali: url ("csshover.htc");}
ul, li, a {
ipakita: harangan;
margin: 0;
padding: 0;
hangganan: 0;
}
ul {
lapad: 150px;
hangganan: 1px solidong pilak;
background: puti;
list-style: wala;
}
li {
posisyon: kamag-anak;
padding: 1px;
kulay sa background: pilak;
z-index: 9;
}
li.folder {kulay ng background: pilak;}
li.folder ul {
posisyon: ganap;
kaliwa: 111px; / * IE lang * /
itaas: 5px;
}
li.folder> ul {left: 140px;} / * para sa iba * /
isang {
padding: 2px;
hangganan: 1px solidong puti;
dekorasyon sa teksto: wala;
kulay itim;
font-weight: naka-bold;
lapad: 100%; / * para sa IE * /
}
li> isang {lapad: auto;} / * para sa iba * /
li a {
ipakita: harangan;
lapad: 140px;
}
li a.submenu {
kulay ng background: dilaw;
}
/ * Mga Kabanata * /
a: mag-hover {
kulay-hangganan: kulay-abo;
kulay ng background: pula;
kulay itim;
}
li.fold a: mag-hover {
kulay ng background: pula;
}
/ * Mga Seksyon * /
li.fold: hover {z-index: 10;}
ul ul, li: hover ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Kabanata
-
2. Seksyon
- 2.1 Kabanata
-
2.2 Seksyon
- 2.2.1 Kabanata
- 2.2.2 Kabanata
- 2.2.3 Kabanata
- 2.3 Kabanata
-
3. Seksyon
- 3.1 Kabanata
- 3.2 Kabanata
- 3.3 Kabanata
- 4. Kabanata
Hakbang 3
Kung nais mong gamitin ang pagpipilian upang suportahan ang hindi na napapanahong mga pagbabago sa browser, pagkatapos ay isang karagdagang linya ay dapat idagdag sa block ng paglalarawan ng estilo (kaagad pagkatapos) (hindi mo kailangang magdagdag ng isang komento):
/ * para sa mas matandang mga browser ng IE * /
katawan {pag-uugali: url ("csshover.htc");}
Hakbang 4
Pagkatapos ay lumikha ng isang hiwalay na pahina, ang nilalaman na kung saan ay ipinapakita sa ibaba.
window. CSSHover = (function () {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 _ / -] * sa (hover | aktibo | pokus)) / 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 = {elemento: , 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: 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) {} } subukan ang {var c = a. rules; var r = c.length; para sa (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 (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; kung (! This.callbacks ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': expression (CSSHover (ito, "'+ 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] = ''} kung (! a.csshover) {a.csshover = } kung (! a.csshover [c]) {a.csshover [c] = true; var g = bagong CSSHoverElement (a, b, c); this.elements.push (g)} return b}, i-unload: function () {subukan {var l = this.elements.length; para sa (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'}}; function CSSHoverElement (a, b, c) {this.node = a; ito.t ype = b; var d = bagong 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]. 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) {kung (a) {return w.patch (a, b, c, d)} iba pa {w.init ()}}}) ();
Hakbang 5
Ang pahina na ito ay dapat na nai-save na may pangalang csshover.htc at ilagay sa parehong lugar tulad ng pangunahing pahina.
