সাইটের পৃষ্ঠাগুলিতে ড্রপ-ডাউন মেনুগুলি স্থান বাঁচাতে এবং একটি ওয়েব উত্সের কাঠামোর যৌক্তিক উপস্থাপনা সরবরাহ করতে ব্যবহৃত হয়। এই উপাদানটি বাস্তবায়নের জন্য অনেকগুলি উপায় রয়েছে, এর মধ্যে একটি সহজ নীচে দেওয়া হল।
এটা জরুরি
এইচটিএমএল এবং সিএসএস ভাষার প্রাথমিক জ্ঞান
নির্দেশনা
ধাপ 1
মেনুটির এইচটিএমএল কোড নেস্টেড তালিকার উপাদানগুলি (ইউএল এবং এলআই) ব্যবহার করে যার ভিতরে পৃষ্ঠাগুলির লিঙ্ক স্থাপন করা হয়েছে। এটিতে কোনও জটিল কাঠামো নেই। ডায়নামিক্স CSS এর মাধ্যমে প্রয়োগ করা হয়, যার বিবরণ ব্লকটি সরাসরি পৃষ্ঠার উত্স কোডে রাখা হয় placed এটি সম্পর্কেও বিশেষ কিছু নেই, পাশাপাশি, পাঠ্যটিতে কিছু স্টাইল ব্লকের উদ্দেশ্য সম্পর্কিত কিছু ব্যাখ্যা রয়েছে।
ধাপ ২
<! ডক্টইপিএইচটিএমএল পাবলিক "- // ডাব্লু 3 সি // ডিটিডি এক্সএইচটিএমএল 1.0 ট্রানজিশনাল // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ড্রপ-ডাউন মেনু * {
হরফ-পরিবার: ভারদান;
হরফ আকার: 14px;
} উল, লি, এ
প্যাডিং: 0;
প্রদর্শন ব্লক;
সীমানা: 0;
মার্জিন: 0;
} উল {
সীমানা: 1px কঠিন #AAA;
প্রস্থ: 150px;
তালিকা-শৈলী: কিছুই নয়;
পটভূমি: # এফএফএফ;
} লি {
পটভূমি রঙ: # এএএ;
অবস্থান: আপেক্ষিক;
জেড-ইনডেক্স: 9;
প্যাডিং: 1 পিএক্স;
}
li.folder {পটভূমি রঙ: # এএএ;
li.folder উল
অবস্থান: পরম;
শীর্ষ: 5px;
বাম: 111px; / * আইই ব্রাউজারগুলির জন্য * /
}
li.folder> ul {বাম: 140px;} / * অন্যান্য ব্রাউজারের জন্য * / a
প্যাডিং: 2 পিএক্স;
সীমানা: 1 পিএক্স কঠিন # এফএফএফ;
পাঠ্য-সজ্জা: কিছুই নয়;
প্রস্থ: 100%; / * আইই ব্রাউজারগুলির জন্য * /
রঙ: # 000;
হরফ ওজন: গা bold়;
}
li> a {প্রস্থ: অটো; * / * অন্যান্য ব্রাউজারগুলির জন্য * / লি এ
প্রস্থ: 140px;
প্রদর্শন ব্লক;
} li a.submenu
পটভূমি রঙ: হলুদ;
} / * লিঙ্কগুলি * /
একটি: হোভার {
সীমানা-রঙ: ধূসর;
পটভূমি রঙ: # এফএফ 10000;
রঙ কালো;
}
li.folder a: hover {
পটভূমি রঙ: # এফএফ 10000;
} / * ফোল্ডার * /
উল উল, লি: হোভার উল {প্রদর্শন: কিছুই নয়}
li.folder: hover {z-index: 10;
লি: হোভার উল, লি: হোভার লি: হোভার উল {ডিসপ্লে: ব্লক;
- 1. পৃষ্ঠা
-
2. ফোল্ডার
- 2.1 পৃষ্ঠা
-
2.2 ফোল্ডার
- 2.2.1 পৃষ্ঠা
- ২.২.২ পৃষ্ঠা
- 2.2.3 পৃষ্ঠা
- 2.3 পৃষ্ঠা
-
3. ফোল্ডার
- ৩.১ পৃষ্ঠা
- ৩.২ পৃষ্ঠা
- ৩.৩ পৃষ্ঠা
- 4. পৃষ্ঠা
ধাপ 3
আপনি এই কোডটিতে ইন্টারনেট এক্সপ্লোরার ব্রাউজারগুলির পুরানো সংস্করণগুলির জন্য সমর্থন যুক্ত করতে পারেন - এটি জাভাস্ক্রিপ্ট ব্যবহার করে প্রয়োগ করা হয়েছে (পিটার নেদারলফ দ্বারা)। আপনাকে প্রয়োজনীয় কোড সহ ফাইলটি ডাউনলোড করতে হবে, উদাহরণস্বরূপ, এই লিঙ্কটি থেকে - https://peterned.home.xs4all.nl/htc/csshover3.htc। এটি অবশ্যই মূল পৃষ্ঠার মতো একই ফোল্ডারে রাখতে হবে। এবং প্রধান পৃষ্ঠার শৈলীর বর্ণনায় এটিতে একটি লিঙ্ক যুক্ত করুন - এটি খোলার স্টাইল ট্যাগের পরে সরাসরি স্থাপন করা যেতে পারে: / * পুরানো IE ব্রাউজারগুলির জন্য *
বডি {আচরণ: url ("csshover3.htc");;
