Im Site-Layout wird ein Menü mit Dropdown-Untermenüabschnitten verwendet, um die Struktur von Abschnitten und Unterabschnitten klarer darzustellen und gleichzeitig Seitenplatz zu sparen. Es ist nicht so schwer, einen solchen Mechanismus zu implementieren: Eines der Implementierungsbeispiele ist im Artikel angegeben.
Anleitung
Schritt 1
Unten ist der vollständige Quellcode der Seite. Beschreibungen von Stilen werden direkt im Text der Seite platziert. Weder HTML noch CSS dieser Variante der Menüimplementierung enthalten komplexe Konstruktionen, die einer detaillierten Erklärung bedürfen.
Schritt 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // DE"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Einfaches Dropdown-Menü mit Unterabschnitten
* {
Schriftfamilie: arial;
Schriftgröße: 16px;
}
/ * für ältere IE-Browser * /
body {Verhalten: url ("csshover.htc");}
ul, li, ein {
Bildschirmsperre;
Rand: 0;
Polsterung: 0;
Rand: 0;
}
ul {
Breite: 150px;
Rand: 1px massives Silber;
Hintergrund: weiß;
Listenstil: keine;
}
li {
Position: relativ;
Polsterung: 1px;
Hintergrundfarbe: silber;
z-Index: 9;
}
li.folder {Hintergrundfarbe: Silber;}
li.ordner ul {
Position: absolut;
links: 111px; / * Nur IE * /
oben: 5px;
}
li.folder> ul {links: 140px;} / * für andere * /
ein {
Polsterung: 2px;
Rand: 1px einfarbig weiß;
Textdekoration: keine;
Farbe: Schwarz;
Schriftdicke: fett;
Breite: 100 %; / * für IE * /
}
li> a {width: auto;} / * für andere * /
li ein {
Bildschirmsperre;
Breite: 140px;
}
li a.submenu {
Hintergrundfarbe: gelb;
}
/ * Kapitel * /
a: schweben {
Randfarbe: grau;
Hintergrundfarbe: rot;
Farbe: Schwarz;
}
li. Ordner a: schweben {
Hintergrundfarbe: rot;
}
/ * Abschnitte * /
li. Ordner: hover {z-index: 10;}
ul ul, li: hover ul ul {Anzeige: keine;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Kapitel
-
2. Abschnitt
- 2.1 Kapitel
-
2.2 Abschnitt
- 2.2.1 Kapitel
- 2.2.2 Kapitel
- 2.2.3 Kapitel
- 2.3 Kapitel
-
3. Abschnitt
- 3.1 Kapitel
- 3.2 Kapitel
- 3.3 Kapitel
- 4. Kapitel
Schritt 3
Wenn Sie die Option nutzen möchten, bereits veraltete Browser-Modifikationen zu unterstützen, dann sollte eine zusätzliche Zeile zum Stilbeschreibungsblock hinzugefügt werden (direkt danach) (Sie müssen keinen Kommentar hinzufügen):
/ * für ältere IE-Browser * /
body {Verhalten: url ("csshover.htc");}
Schritt 4
Erstellen Sie dann eine separate Seite, deren Inhalt unten angezeigt wird.
window. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(schweben | aktiv | Fokus)) / i; var n = / (. *?):(schweben | aktiv | Fokus) / 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 = Funktion (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {Elemente: , Rückrufe: {}, 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. 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, 'auf 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 + ': Ausdruck (CSSHover (this, "'+ 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] = ''} if (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true; var g = new CSSHoverElement (a, b, c); this.elements.push (g)} return b}, entladen: 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', deactivator: 'onmouseleave'}, onactive: {activator: 'onmousedown ', deactivator:' onmouseup '}, onfocus: {activator:' onfocus', deaktivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; das.t ype = b;var d = new 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) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Schritt 5
Diese Seite sollte unter dem Namen csshover.htc gespeichert und an der gleichen Stelle wie die Hauptseite platziert werden.
