पृष्ठ स्थान को सहेजते समय अनुभागों और उपखंडों की संरचना को अधिक स्पष्ट रूप से प्रस्तुत करने के लिए साइट लेआउट में ड्रॉप-डाउन सबमेनू अनुभागों के साथ एक मेनू का उपयोग किया जाता है। इस तरह के तंत्र को लागू करना इतना मुश्किल नहीं है: कार्यान्वयन के उदाहरणों में से एक लेख में दिया गया है।
अनुदेश
चरण 1
नीचे पेज का पूरा सोर्स कोड है। शैलियों के विवरण सीधे पृष्ठ के पाठ में रखे जाते हैं। मेनू कार्यान्वयन के इस प्रकार के न तो एचटीएमएल और न ही सीएसएस में कोई जटिल निर्माण होता है जिसके लिए विस्तृत स्पष्टीकरण की आवश्यकता होती है।
चरण दो
<! DOCTYPE html सार्वजनिक "- // W3C // DTD XHTML 1.0 संक्रमणकालीन // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
उपखंडों के साथ सरल ड्रॉपडाउन मेनू
* {
फ़ॉन्ट-परिवार: एरियल;
फ़ॉन्ट-आकार: 16px;
}
/ * पुराने IE ब्राउज़रों के लिए * /
शरीर {व्यवहार: url ("csshover.htc");}
उल, ली, ए {
प्रदर्शन क्षेत्र;
मार्जिन: 0;
पैडिंग: 0;
सीमा: 0;
}
उल {
चौड़ाई: 150 पीएक्स;
सीमा: 1px ठोस चांदी;
पृष्ठभूमि: सफेद;
सूची-शैली: कोई नहीं;
}
ली {
स्थिति: रिश्तेदार;
पैडिंग: 1px;
पृष्ठभूमि-रंग: चांदी;
जेड-इंडेक्स: 9;
}
li.folder {पृष्ठभूमि-रंग: चांदी;}
ली.फ़ोल्डर उल {
स्थिति: निरपेक्ष;
बाएं: 111px; / * केवल आईई * /
शीर्ष: 5px;
}
li.folder> उल {बाएं: 140px;} / * दूसरों के लिए * /
ए {
पैडिंग: 2px;
सीमा: 1px ठोस सफेद;
पाठ-सजावट: कोई नहीं;
रंग काला;
फोंट की मोटाई: बोल्ड;
चौड़ाई: 100%; / * आईई के लिए * /
}
ली> ए {चौड़ाई: ऑटो;} / * दूसरों के लिए * /
ली ए {
प्रदर्शन क्षेत्र;
चौड़ाई: 140px;
}
ली ए सबमेनू {
पृष्ठभूमि-रंग: पीला;
}
/ *अध्याय* /
ए: होवर {
सीमा-रंग: ग्रे;
पृष्ठभूमि-रंग: लाल;
रंग काला;
}
li.folder a: होवर {
पृष्ठभूमि-रंग: लाल;
}
/ *अनुभाग* /
li.folder: होवर {z-index: 10;}
उल उल, ली: होवर उल उल {प्रदर्शन: कोई नहीं;}
ली: होवर उल, ली: होवर ली: होवर उल {डिस्प्ले: ब्लॉक;}
- 1. अध्याय
-
2. खंड
- २.१ अध्याय
-
२.२ खंड
- 2.2.1 अध्याय
- २.२.२ अध्याय
- 2.2.3 अध्याय
- २.३ अध्याय
-
3. खंड
- ३.१ अध्याय
- ३.२ अध्याय
- ३.३ अध्याय
- 4. अध्याय
चरण 3
यदि आप पहले से ही पुराने ब्राउज़र संशोधनों का समर्थन करने के लिए विकल्प का उपयोग करना चाहते हैं, तो शैली विवरण ब्लॉक में एक अतिरिक्त पंक्ति जोड़ी जानी चाहिए (तुरंत बाद में) (आपको कोई टिप्पणी जोड़ने की आवश्यकता नहीं है):
/ * पुराने IE ब्राउज़रों के लिए * /
शरीर {व्यवहार: url ("csshover.htc");}
चरण 4
फिर एक अलग पेज बनाएं, जिसका कंटेंट नीचे दिखाया गया है।
window. CSSHover = (फ़ंक्शन () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(होवर | सक्रिय | फोकस)) / i; var n = / (। *?):(होवर | सक्रिय | फोकस) / i; var o = / [^:] +: ([az / -] +)। * / मैं; वर पी = / (। ([ए-जेड0-9 _ / -] +): [एज़] +) | (: [एज़] +) / जी; वर क्यू = / \। ([a-z0-9 _ / -] * पर (होवर | सक्रिय | फोकस)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {इंडेक्स: 0, लिस्ट: ['टेक्स्ट-काशीदा', 'टेक्स्ट-काशीदा-स्पेस', 'टेक्स्ट-जस्टिफाई'], प्राप्त करें: फंक्शन () {रिटर्न दिस.लिस्ट [(this.index ++)% this. list.length] }}; var v = function (c) {रिटर्न c.replace (/-(.)/ mg, function (a, b) {रिटर्न b.toUpperCase ()})}; var w = {elements: , कॉलबैक: {}, init: फ़ंक्शन () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {रिटर्न} var a = window.document.styleSheets, l = a.length; के लिए (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.imports) {कोशिश करें {var b = a. आयात; var l = b.length; के लिए (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} कैच (सुरक्षा अपवाद) {} } कोशिश करें {var c = a. नियम; var r = c.length; के लिए (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, '$ 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 + ': एक्सप्रेशन (CSSHover (यह, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, पैच: फंक्शन (ए, बी, सी, डी) {कोशिश {var f = a.parentNode.currentStyle [d]; a.style [d] = f} कैच (e) {a.runtimeStyle [d] = ''} अगर (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true; var g = new CSSHoverElement (a, b, c); this.elements.push (g)} रिटर्न b}, अनलोड: फंक्शन () {कोशिश {var l = this.elements.length; for (var i = 0; i <l; i ++) {this.elements .अनलोड ()} this.elements =; this.callbacks = {}} कैच (e) {}}}; var x = {onhover: {activator: 'onmouseenter', deactivator: 'onmouseleave'}, निष्क्रिय: {एक्टीवेटर: 'ऑनमाउसडाउन', डिएक्टिवेटर:' ऑनमाउसअप '}, ऑनफोकस: {एक्टीवेटर:' ऑनफोकस', डिएक्टिवेटर: 'ऑनब्लर'}}; फंक्शन 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 = {अनलोड: फंक्शन () {this.node.detachEvent (x [this.type] । एक्टिवेटर, यह.एक्टीवेटर); यह.नोड।डिटैचइवेंट (x [यह। प्रकार]। निष्क्रिय करने वाला, यह। निष्क्रिय करने वाला); यह। एक्टीवेटर = शून्य; यह। निष्क्रियकर्ता = शून्य; यह। नोड = शून्य; यह प्रकार = शून्य } }; window.attachEvent ('onbeforeunload', function () {w.unload ()}); रिटर्न फंक्शन (a, b, c, d) {if (a) {रिटर्न w.patch (a, b, c), डी)} और {w.init ()}}}) ();
चरण 5
इस पृष्ठ को csshover.htc नाम से सहेजा जाना चाहिए और मुख्य पृष्ठ के समान स्थान पर रखा जाना चाहिए।
