পৃষ্ঠা স্পেস সংরক্ষণ করার সময় বিভাগ এবং সাব-বিভাগগুলির কাঠামো আরও স্পষ্টভাবে উপস্থাপন করার জন্য সাইট লেআউটে ড্রপ-ডাউন সাবমেনু বিভাগ সহ একটি মেনু ব্যবহৃত হয়। এ জাতীয় প্রক্রিয়া বাস্তবায়ন করা এতটা কঠিন নয়: বাস্তবায়নের উদাহরণগুলির মধ্যে একটি নিবন্ধে দেওয়া হয়েছে।
নির্দেশনা
ধাপ 1
নীচে পৃষ্ঠার সম্পূর্ণ উত্স কোড দেওয়া আছে। শৈলীর বর্ণনাগুলি সরাসরি পৃষ্ঠার পাঠ্যে রাখা হয়। মেনু বাস্তবায়নের এই বৈকল্পিকের এইচটিএমএল বা সিএসএসের মধ্যেই কোনও জটিল নির্মাণ নেই যার বিশদ ব্যাখ্যা প্রয়োজন।
ধাপ ২
<! ডক্টইপিএইচটিএমএল পাবলিক "- // ডাব্লু 3 সি // ডিটিডি এক্সএইচটিএমএল 1.0 ট্রানজিশনাল // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
সাবসেকশন সহ সহজ ড্রপডাউন মেনু
* {
হরফ-পরিবার: আরিয়াল;
হরফ-আকার: 16px;
}
/ * পুরানো IE ব্রাউজারগুলির জন্য * /
বডি {আচরণ: url ("csshover.htc");
উল, লি, একটি
প্রদর্শন ব্লক;
মার্জিন: 0;
প্যাডিং: 0;
সীমানা: 0;
}
উল
প্রস্থ: 150px;
সীমানা: 1 পিএক্স শক্ত রৌপ্য;
পটভূমি: সাদা;
তালিকা-শৈলী: কিছুই নয়;
}
লি {
অবস্থান: আপেক্ষিক;
প্যাডিং: 1 পিএক্স;
পটভূমি রঙ: রূপা;
জেড-ইনডেক্স: 9;
}
li.folder {পটভূমি রঙ: রূপা;
li.folder উল
অবস্থান: পরম;
বাম: 111px; / * কেবলমাত্র * /
শীর্ষ: 5px;
}
li.folder> ul {বাম: 140px;} / * অন্যের জন্য * /
একটি
প্যাডিং: 2 পিএক্স;
সীমানা: 1px কঠিন সাদা;
পাঠ্য-সজ্জা: কিছুই নয়;
রঙ কালো;
হরফ ওজন: গা bold়;
প্রস্থ: 100%; / * আইই / এর জন্য /
}
li> a {প্রস্থ: অটো; others / * অন্যের জন্য * /
লি এ {
প্রদর্শন ব্লক;
প্রস্থ: 140px;
}
li a.submenu
পটভূমি রঙ: হলুদ;
}
/ * অধ্যায় * /
একটি: হোভার {
সীমানা-রঙ: ধূসর;
পটভূমি রঙ: লাল;
রঙ কালো;
}
li.folder a: hover {
পটভূমি রঙ: লাল;
}
/ * বিভাগ * /
li.folder: hover {z-index: 10;
উল উল, লি: হোভার উল {প্রদর্শন: কিছুই নয়}
লি: হোভার উল, লি: হোভার লি: হোভার উল {ডিসপ্লে: ব্লক;
- 1. অধ্যায়
-
2. বিভাগ
- 2.1 অধ্যায়
-
২.২ ধারা
- 2.2.1 অধ্যায়
- ২.২.২ অধ্যায়
- 2.2.3 অধ্যায়
- 2.3 অধ্যায়
-
3. বিভাগ
- ৩.১ অধ্যায়
- ৩.২ অধ্যায়
- ৩.৩ অধ্যায়
- ৪. অধ্যায়
ধাপ 3
আপনি যদি ইতিমধ্যে পুরানো ব্রাউজার পরিবর্তনগুলিকে সমর্থন করার বিকল্পটি ব্যবহার করতে চান তবে শৈলীর বিবরণ ব্লকে (অবিলম্বে) একটি অতিরিক্ত লাইন যুক্ত করা উচিত (আপনার কোনও মন্তব্য যুক্ত করার দরকার নেই):
/ * পুরানো IE ব্রাউজারগুলির জন্য * /
বডি {আচরণ: url ("csshover.htc");
পদক্ষেপ 4
তারপরে একটি পৃথক পৃষ্ঠা তৈরি করুন, যার বিষয়বস্তু নীচে প্রদর্শিত হবে।
window. CSSHover = (ফাংশন () {var m = / (^ | / s) ((([^ a] ([^] +)?)?) | (ক ([^ #।] [^] +) +) +)):(হোভার | অ্যাক্টিভ | ফোকাস)) / i; var n = / ((। *?):(হোভার | অ্যাক্টিভ | ফোকাস) / আমি; ভার ও = / [^:] +: ([আজে / -] +)। * / i; var p = / (। ([a-z0-9 _ / -] +): [আজ] +) | (:: [এজে] +) / জিআই; ভার কিউ = / ([a-z0-9 _ / -] * অন (হোভার | অ্যাক্টিভ | ফোকাস)) / i; var এস = / এমএসি (5 | 6 | 7) / i; ভার টি = / ব্যাককম্যাট / আই; ভার ইউ = {সূচক: 0, তালিকা: ['পাঠ্য-কাশিদা', 'পাঠ্য-কাশিদা-স্পেস', 'পাঠ্য-ন্যায্যতা দিন'], পান: ফাংশন () {ফিরিয়ে দিন এই লিস্টটি [(this.index ++)% এটি। list.length] v}; var v = ফাংশন (c) {রিটার্ন c.replace (/-(.)/ মিলিগ্রাম, ফাংশন (a, খ) {রিটার্ন b.toUpperCase ()}) var; var w = {উপাদান: , কলব্যাকস: {}, আরআর: ফাংশন () {যদি (! s.test (navigator.userAgent) && t.test (window.docament.compatMode)) {রিটার্ন} var a = window.docament.styleSheets, l = a। দৈর্ঘ্য; এর জন্য (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, পার্স স্টাইলশীট: ফাংশন (a) {if (a.port) {চেষ্টা করুন {var b = a। আমদানি; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} ক্যাচ (সিকিউরিটি এক্সেপশন) {} } চেষ্টা করুন {var সি = a। নিয়ম; var r = c.leth; এর জন্য (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: ফাংশন (a, b) {var c = a.selectorText; যদি (m.test (c)) {var d = a.style.cssText; var e = n.exec (গ) [১]; বর্ণ এফ = সি.রপ্লেস (ও, '$ 1' তে '); ভেরি জি = সি.রেপ্লেস (পি,'। $ 2 '+ এফ); ভার এইচ = কিউ.এক্সেক (জি) [1]; var i = e + h; if (! This.callbacks ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': এক্সপ্রেশন (সিএসএসহোভার (এটি, "'+ f +'", "'+ এইচ +'", "'+ কে +'")) '); এই ক্যালব্যাকস = সত্য} বি.এডিডিআরুল (জি, ডি)} }, প্যাচ: ফাংশন (a, b, c, d) {চেষ্টা করুন f 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 b, আনলোড: ফাংশন () {চেষ্টা করুন {var l = this.eferences.length; (var i = 0; i <l; i ++) {this.elements .উনলোড ()} this.elements =; this.callbacks = {}} ক্যাচ (ই) {}}}; ভার x = h অনহোভার: {অ্যাক্টিভেটর: 'onmouseenter', নিষ্ক্রিয়কারী: 'onmouseleave'}, অ্যাক্টিভেটভ: {অ্যাক্টিভেটর: 'onmousedown', অ্যাক্টিভেটর: 'onmouseup'}, অনফোকাস: {অ্যাক্টিভেটর: 'onfocus', নিষ্ক্রিয়কারী: 'onblur'}}; ফাংশন CSSHoverElement (a, b, c) {this.node = a; this.t ype = b; var d = new RegExp ('(^ | / s)' + c + '(s | $)', 'g');
এই.এভেটিভেটর = ফাংশন ().c a.className + = '' + c}; এই.ডেভেটিভেটর = ফাংশন ().c a.className = a.className.replace (d, '')}; a.attachEvent (x [বি].অ্যাক্টিভেটর, এটি.এ্যাকটিভেটর); এ.ট্যাচএভেন্ট (এক্স [বি].ডেভেটিভেটর, এটি.ডেভেটিভেটর)} সিএসএসহোভারইলেট.প্রোটোটাইপ = {আনলোড: ফাংশন () {this.node.detachEvent (x [this.type])। অ্যাক্টিভেটর, এটি.অ্যাক্টিভেটর); এটি.নোড.ডেটাচেন্ট (এক্স [এটি.টিপ] }}; window.attachEvent ('onbeforeunload', ফাংশন () {w.unload ()}); রিটার্ন ফাংশন (a, b, c, d) {যদি (ক) {রিটার্ন w.patch (a, b, c), d)} অন্য {w.init ()}}}) ();
পদক্ষেপ 5
এই পৃষ্ঠাটি csshover.htc নাম দিয়ে সংরক্ষণ করা উচিত এবং প্রধান পৃষ্ঠার মতো একই জায়গায় রাখা উচিত।
