საიტის განლაგებაში გამოიყენება მენიუ ჩამოსაშლელი ქვემენიუს განყოფილებებით, რათა უფრო მკაფიოდ წარმოადგინონ სექციების სტრუქტურა და ქვეპუნქტები, ხოლო გვერდის სივრცის დაზოგვა. ასეთი მექანიზმის განხორციელება არც ისე რთულია: სტატიაში მოცემულია განხორციელების ერთ-ერთი მაგალითი.
ინსტრუქციები
Ნაბიჯი 1
ქვემოთ მოცემულია გვერდის სრული კოდის კოდი. სტილის აღწერილობა მოთავსებულია უშუალოდ გვერდის ტექსტში. მენიუს განხორციელების ამ ვარიანტის არც html და არც css არ შეიცავს რთულ კონსტრუქციებს, რომლებიც საჭიროებს დეტალურ ახსნას.
ნაბიჯი 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 გარდამავალი // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ჩამოსაშლელი მარტივი მენიუ ქვეპუნქტებით
* {
font-family: arial;
შრიფტის ზომა: 16px;
}
/ * ძველი IE ბრაუზერებისათვის * /
body {ქცევა: url ("csshover.htc");}
ულ, ლი, ა {
ჩვენება: ბლოკი;
ზღვარი: 0;
შევსება: 0;
საზღვარი: 0;
}
ულ {
სიგანე: 150px;
საზღვარი: 1px მყარი ვერცხლი;
ფონი: თეთრი;
სიის სტილი: არცერთი;
}
ლი {
პოზიცია: ნათესავი;
შევსება: 1px;
ფონის ფერი: ვერცხლი;
z- ინდექსი: 9;
}
li.folder {ფონის ფერი: ვერცხლი;}
li.folder ul {
პოზიცია: აბსოლუტური;
მარცხნივ: 111px; / * მხოლოდ IE * /
ზედა: 5px;
}
li.folder> ul {მარცხნივ: 140px;} / * სხვებისთვის * /
a {
შევსება: 2px;
საზღვარი: 1px მყარი თეთრი;
ტექსტი-დეკორაცია: არცერთი;
ფერი შავი;
შრიფტის წონა: სქელი;
სიგანე: 100%; / * IE * /
}
li> a {width: auto;} / * სხვებისთვის * /
ლი ა {
ჩვენება: ბლოკი;
სიგანე: 140px;
}
li a.submenu {
ფონის ფერი: ყვითელი;
}
/ * თავები * /
a: hover {
საზღვრის ფერი: ნაცრისფერი;
ფონის ფერი: წითელი;
ფერი შავი;
}
საქაღალდე 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 ([^ ^.] [^] +) +))):(hover | აქტიური | ფოკუსირება)) / i; var n = / (. *?):(hover | აქტიური | ფოკუსირება) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +] | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * ჩართული (hover | აქტიური | ფოკუსირება)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {ინდექსი: 0, სია: ['text-kashida', 'text-kashida-space', 'text-justify'], მიიღეთ: function () {return this.list [(this.index ++)% this. list.length]}}; var v = ფუნქცია (c) {დაბრუნება c.replace (/-(.)/ მგ, ფუნქცია (a, b) {return b.toUpperCase ()})}; var w = {ელემენტები: , ზარები: {}, init: ფუნქცია () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = windows.document.styleSheets, l = a. სიგრძე; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: ფუნქცია (a) {if (a.imports) {ცდა {var b = a. იმპორტი; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}}} catch (SecurityException) {} } სცადეთ {var c = a. წესები; var r = c.length; for (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: ფუნქცია (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (გ) [1]; var f = c. ჩანაცვლება (o, '$ 1-ზე'); var g = c. ჩანაცვლება (p, '. $ 2' + ვ); var h = q.exec (გ) [1]; var i = e + h; if (! This.callbacks ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': გამოხატვა (CSSHover (ეს, '' + 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] = ''} თუ (! a.csshover) {a.csshover = } თუ (! a.csshover [c]) {a.csshover [c] = true; var g = new CSSHoverElement (a, b, c); this.element.push (g)} return b}, განტვირთვა: function () {try {var l = this.element.length; for (var i = 0; i <l; i ++) {this.element .load ()} this.element =; this.callbacks = {}} catch (e) {}}}; var x = {onhover: {activator: 'onmouseenter', გამორთვა: 'onmouseleave'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; ფუნქცია CSSHoverElement (a, b, c) {this.node = a; ეს ype = b; var d = new RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = ფუნქცია () {a.className + = '' + c}; this.deactivator = ფუნქცია () {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]. აქტივატორი, ეს.აქტივატორი); this.node.detachEvent (x [this.type].deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null }}; window.attachEvent ('onbeforeunload', ფუნქცია () {w.unload ()}); დაბრუნების ფუნქცია (a, b, c, d) {if (a) {return w.patch (a, b, c), დ)} სხვაგან {w.init ()}}}) ();
ნაბიჯი 5
ეს გვერდი უნდა იყოს შენახული csshover.htc სახელით და განთავსდეს იმავე ადგილას, როგორც მთავარი გვერდი.
