Menu z rozwijanymi sekcjami podmenu jest stosowane w układzie witryny w celu bardziej przejrzystego przedstawienia struktury sekcji i podsekcji, przy jednoczesnej oszczędności miejsca na stronie. Zaimplementowanie takiego mechanizmu nie jest takie trudne: jeden z przykładów implementacji podano w artykule.
Instrukcje
Krok 1
Poniżej znajduje się pełny kod źródłowy strony. Opisy stylów umieszczane są bezpośrednio w tekście strony. Ani html, ani css tego wariantu implementacji menu nie zawierają skomplikowanych konstrukcji, które wymagają szczegółowego wyjaśnienia.
Krok 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
„https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Proste menu rozwijane z podsekcjami
* {
rodzina czcionek: arial;
rozmiar czcionki: 16px;
}
/ * dla starszych przeglądarek IE * /
body {zachowanie: url ("csshover.htc");}
ul, li, a {
Blok wyświetlacza;
margines: 0;
wypełnienie: 0;
granica: 0;
}
ul {
szerokość: 150px;
obramowanie: 1px litego srebra;
tło: białe;
styl listy: brak;
}
ja {
pozycja: względna;
wypełnienie: 1px;
kolor tła: srebrny;
indeks z: 9;
}
li.folder {kolor-tła: srebrny;}
li.folder ul {
pozycja: bezwzględna;
lewy: 111px; / * Tylko IE * /
góra: 5px;
}
li.folder> ul {left: 140px;} / * dla innych * /
{
wypełnienie: 2px;
obramowanie: 1px stałe białe;
dekoracja tekstu: brak;
kolor czarny;
grubość czcionki: pogrubiona;
szerokość: 100%; / * dla IE * /
}
li> a {szerokość: auto;} / * dla innych * /
ja {
Blok wyświetlacza;
szerokość: 140px;
}
li a.podmenu {
kolor tła: żółty;
}
/ * Rozdziały * /
a: najedź {
kolor obramowania: szary;
kolor tła: czerwony;
kolor czarny;
}
li.folder a: najedź {
kolor tła: czerwony;
}
/ * Sekcje * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul {wyświetlanie: brak;}
li: unosić się ul, li: unosić się li: unosić się ul {wyświetlać: blok;}
- 1. Rozdział
-
2. Sekcja
- 2.1 Rozdział
-
2.2 Sekcja
- 2.2.1 Rozdział
- 2.2.2 Rozdział
- 2.2.3 Rozdział
- 2.3 Rozdział
-
3. Sekcja
- 3.1 Rozdział
- 3.2 Rozdział
- 3.3 Rozdział
- 4. Rozdział
Krok 3
Jeśli chcesz skorzystać z opcji obsługi już nieaktualnych modyfikacji przeglądarki, to do bloku opisu stylu należy dodać dodatkową linię (zaraz po) (nie trzeba dodawać komentarza):
/ * dla starszych przeglądarek IE * /
body {zachowanie: url ("csshover.htc");}
Krok 4
Następnie utwórz osobną stronę, której zawartość pokazana jest poniżej.
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 _ / -] * on (najechanie | aktywny | fokus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {indeks: 0, lista: ['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 = {elementy: , wywołania zwrotne: {}, 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) {spróbuj {var b = a. imports; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } try {var c = a. rules; var r = c.length; for (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, 'na $ 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 + ': wyrażenie (CSSHover (this, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, patch: function (a, b, c, d) {spróbuj {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 = nowy CSSHoverElement (a, b, c) this.elements.push (g)} return b}, wyładuj: function () {spróbuj {var l = this.elements.length; for (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; this.callbacks = {}} catch (e) {}}}; var x = {onhover: {activator: 'onmouseenter', deaktywator: 'onmouseleave'}, onactive: {aktywator: 'onmousedown', deaktywator:'onmouseup'}, onfocus: {aktywator:'onfocus', dezaktywator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; to.t ype = b; var d = nowe 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 ()}); funkcja powrotu (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Krok 5
Ta strona powinna być zapisana pod nazwą csshover.htc i umieszczona w tym samym miejscu co strona główna.
