Menyu iliyo na sehemu za kushuka za chini hutumiwa katika mpangilio wa tovuti ili kuwasilisha wazi muundo wa sehemu na vifungu, wakati wa kuhifadhi nafasi ya ukurasa. Sio ngumu sana kutekeleza utaratibu kama huu: moja ya mifano ya utekelezaji imetolewa katika kifungu hicho.
Maagizo
Hatua ya 1
Chini ni nambari kamili ya chanzo ya ukurasa. Maelezo ya mitindo huwekwa moja kwa moja kwenye maandishi ya ukurasa. Html wala css ya lahaja hii ya utekelezaji wa menyu haina muundo wowote tata ambao unahitaji maelezo ya kina.
Hatua ya 2
<! DOCTYPE html UMMA "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menyu rahisi ya kushuka na vifungu
* {
font-familia: arial;
saizi ya fonti: 16px;
}
/ * kwa vivinjari vya zamani vya IE * /
mwili {tabia: url ("csshover.htc");}
ul, li, a {
onyesha: kuzuia;
margin: 0;
padding: 0;
mpaka: 0;
}
ul {
upana: 150px;
mpaka: 1px fedha ngumu;
historia: nyeupe;
mtindo-orodha: hakuna;
}
li {
msimamo: jamaa;
padding: 1px;
rangi ya asili: fedha;
z-index: 9;
}
li.folder {rangi-ya nyuma: fedha;}
li.folder ul {
msimamo: kabisa;
kushoto: 111px; / * IE tu * /
juu: 5px;
}
li.folder> ul {kushoto: 140px;} / * kwa wengine * /
{
padding: 2px;
mpaka: 1px nyeupe nyeupe;
maandishi-mapambo: hakuna;
rangi: Nyeusi;
font-uzito: ujasiri;
upana: 100%; / * kwa IE * /
}
li> a {width: auto;} / * kwa wengine * /
li {
onyesha: kuzuia;
upana: 140px;
}
li a.submenu {
rangi ya nyuma: njano;
}
/ * Sura * /
a: hover {
rangi ya mpaka: kijivu;
rangi ya asili: nyekundu;
rangi: nyeusi;
}
li. folda ya: hover {
rangi ya asili: nyekundu;
}
/ * Sehemu * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul {onyesha: hakuna;}
li: hover ul, li: hover li: hover ul {kuonyesha: kuzuia;}
- 1. Sura
-
2. Sehemu
- 2.1 Sura
-
2.2 Sehemu
- Sura ya 2.2.1
- Sura ya 2.2.2
- Sura ya 2.2.3
- Sura ya 2.3
-
3. Sehemu
- 3.1 Sura
- Sura ya 3.2
- Sura ya 3.3
- 4. Sura
Hatua ya 3
Ikiwa unataka kutumia chaguo kuunga mkono marekebisho ya kivinjari yaliyopitwa na wakati, basi laini ya ziada inapaswa kuongezwa kwenye kizuizi cha maelezo ya mtindo (mara baada ya) (hauitaji kuongeza maoni):
/ * kwa vivinjari vya zamani vya IE * /
mwili {tabia: url ("csshover.htc");}
Hatua ya 4
Kisha unda ukurasa tofauti, ambayo maudhui yake yameonyeshwa hapa chini.
dirisha. CSSHover = (kazi () {var m = / (^ | / s) (([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | kazi | kuzingatia)) / i; var n = / (. *?): (hover | kazi | kuzingatia) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * kwenye (hover | active | kuzingatia)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index: 0, orodha: ['text-kashida', 'text-kashida-space', 'text-justify'], pata: function () {return this.list [(this.index ++)% this. orodha.length]}}; var v = kazi (c) {kurudi c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , callbacks: {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.style Karatasi, l = a. urefu; kwa (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.port) {jaribu {var b = a. uagizaji; } jaribu {var c = a. sheria; var r = c. urefu; kwa (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: function (a, b) {var c = a.selectorText; ikiwa (m.test (c)) {var d = a.style.cssText; var e = n.exec (c) [1]; var f = c. mahali (o, 'kwa $ 1'); var g = c. mahali (p, '. $ 2' + f); var h = q.exec (g) [Var i = e + h; ikiwa (! Hii. Vikwazo ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': expression (CSSHover (hii, "'+ f +'", "'+ h +'", "'+ k +'")) '); hii.cbbacks = kweli} b.addRule (g, d)} }, kiraka: kazi (a, b, c, d) {jaribu {var f = a.parentNode.currentStyle [d]; a.style [d] = f} kukamata (e) {a.runtimeStyle [d] = ''} ikiwa (! a.csshover) {a.csshover = } ikiwa (! a.csshover [c]) {a.csshover [c] = kweli; var g = CSSHoverElement mpya (a, b, c) hii.elements.push (g)} rudisha b}, pakua: kazi () {jaribu {var l = this.elements.length; kwa (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; hii.cbbacks = {}} catch (e) {}}}; var x = {onhover: {activator: 'onmouseenter', deactivator: 'onmouseleave'}, haifanyi kazi: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; kazi CSSHoverElement (a, b, c) {this.node = a; hii.t ype = b; var d = mpya RegExp ('(^ | / s)' + c + '(s | $)', 'g');
hii.activator = kazi () {a.className + = " + c}; this.deactivator = kazi () {a.className = a.className.replace (d, '')}; a.attachEvent (x [b).activator, hii.activator); activator, this.activator); this.node.detachEvent (x [this.type].deactivator, this.deactivator); this.activator = null; window.attachEvent ('onbeforeunload', function () {w.unload ()}); kazi ya kurudisha (a, b, c, d) {if (a) {return w.atch (a, b, c, d)} mwingine {w.init ()}}}) ();
Hatua ya 5
Ukurasa huu unapaswa kuhifadhiwa na jina csshover.htc na kuwekwa mahali sawa na ukurasa kuu.
