Меню с падащи раздели на подменюта се използва в оформлението на сайта, за да се представи по-ясно структурата на раздели и подраздели, като същевременно се спести място на страницата. Не е толкова трудно да се приложи такъв механизъм: един от примерите за изпълнение е даден в статията.
Инструкции
Етап 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;
размер на шрифта: 16px;
}
/ * за по-стари IE браузъри * /
body {поведение: url ("csshover.htc");}
ul, li, a {
дисплей: блок;
марж: 0;
подплата: 0;
граница: 0;
}
ул {
ширина: 150px;
граница: 1px твърдо сребро;
фон: бял;
стил на списък: няма;
}
li {
позиция: относителна;
подплата: 1px;
цвят на фона: сребърен;
z-индекс: 9;
}
li.folder {background-color: silver;}
li.folder ul {
позиция: абсолютна;
вляво: 111px; / * Само IE * /
отгоре: 5px;
}
li.folder> ul {ляво: 140px;} / * за други * /
а {
подложка: 2px;
граница: 1px плътно бяло;
декорация на текст: няма;
цвят черен;
шрифт-тегло: получер;
ширина: 100%; / * за IE * /
}
li> a {width: auto;} / * за други * /
li a {
дисплей: блок;
ширина: 140px;
}
li a.submenu {
цвят на фона: жълт;
}
/ * Глави * /
a: hover {
цвят на контура: сив;
цвят на фона: червен;
цвят черен;
}
li.folder a: hover {
цвят на фона: червен;
}
/ * Раздели * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul {дисплей: няма;}
li: hover ul, li: hover li: hover ul {дисплей: блок;}
- 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 браузъри * /
body {поведение: url ("csshover.htc");}
Стъпка 4
След това създайте отделна страница, чието съдържание е показано по-долу.
window. 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 (hover | active | focus)) / 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 = {елементи: , обратно извикване: {}, 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) {} } опитайте {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 (в) [1]; var f = c.replace (o, 'на $ 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 (this, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, кръпка: функция (a, b, c, d) {try {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 = нов CSSHoverElement (a, b, c); this.elements.push (g)} връщане b}, разтоварване: function () {try {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', деактиватор: 'onmouseleave'}, onactive: {активатор: 'onmousedown', деактиватор: 'onmouseup'}, onfocus: {activator: 'onfocus', деактиватор: 'onblur'}}; функция 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 .activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {load: 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 ()}); функция за връщане (a, b, c, d) {if (a) {return w.patch (a, b, c, г)} else {w.init ()}}}) ();
Стъпка 5
Тази страница трябва да бъде запазена с името csshover.htc и поставена на същото място като основната страница.
