ভাল এইচটিএমএল কোড এবং সাধারণ সিএসএস বিধিগুলির সাহায্যে আপনি একটি দুর্দান্ত পপআপ মেনু তৈরি করতে পারেন যা সহজেই সংশোধন ও পরিপূরক হতে পারে। মার্কআপ ল্যাঙ্গুয়েজ এবং ক্যাসকেডিং স্টাইল শীট ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে সমস্ত ব্রাউজারে মেনুগুলি সঠিকভাবে কাজ করে।
নির্দেশনা
ধাপ 1
প্রথমে আপনার মেনুটির প্রাথমিক কাঠামোটি তৈরি করুন। একটি পাঠ্য সম্পাদক খুলুন এবং একটি সাবমেনু দিয়ে একটি তালিকাযুক্ত তালিকা তৈরি করুন যা পিতামাতাদের তালিকা আইটেম হিসাবে কাজ করে। উদাহরণ স্বরূপ:
-
প্রথম উপাদান
- ড্রপডাউন আইটেম
- ড্রপডাউন 2
ধাপ ২
উত্পন্ন তালিকাটি একটি পৃথক এইচটিএমএল ফাইলে সংরক্ষণ করুন। এরপরে.css এক্সটেনশান সহ একটি ফাইল তৈরি করুন এবং সমস্ত স্টাইল শীট পরামিতি প্রবেশ করুন।
ধাপ 3
বুলেট তালিকায় প্রয়োগযোগ্য যে কোনও প্যাডিং এবং বুলেটগুলি সরিয়ে ফেলুন এবং সিএসএস সরঞ্জামগুলি ব্যবহার করে মেনু প্রস্থ সেট করুন: উল {তালিকা-শৈলী: কিছুই নয়;
প্রস্থ: 200px; }
পদক্ষেপ 4
অবস্থানের বৈশিষ্ট্যটি ব্যবহার করে তালিকার সমস্ত আইটেমের আপেক্ষিক অবস্থান নির্ধারণ করুন: উল লি {অবস্থান: আপেক্ষিক; }
পদক্ষেপ 5
এর পরে, আপনাকে একটি সাবমেনু ডিজাইন করতে হবে, যার প্রতিটি উপাদানের মাউস পয়েন্টারটি আইটেমটিতে থাকা মুহুর্তে প্যারেন্ট মেনুর ডানদিকে প্রদর্শিত হবে: li ul {অবস্থান: পরম;
বাম: 199px;
শীর্ষ: 0;
প্রদর্শন: কিছুই নয়; } বাম বৈশিষ্ট্যটি মেনুটির প্রস্থের চেয়ে এক পিক্সেল কম। এটি পপ-আপ আইটেমগুলিকে ডাবল সীমানা তৈরি না করে বুদ্ধিমানের সাথে অবস্থান করতে দেয়। পৃষ্ঠাটি খোলার সময় প্রদর্শন বৈশিষ্টটি সাবমেনুটি আড়াল করতে ব্যবহৃত হয়।
পদক্ষেপ 6
উপযুক্ত সিএসএস বিকল্পগুলি ব্যবহার করে পছন্দসই হিসাবে লিঙ্কগুলি স্টাইল করুন। প্রদর্শন অন্তর্ভুক্ত করুন: ব্লক প্যারামিটার যাতে প্রতিটি লিঙ্ক এটির জন্য সংরক্ষিত সমস্ত স্থান নেয়।
পদক্ষেপ 7
কার্সারটি শেষ হয়ে যাওয়ার মুহুর্তে মেনুটি উপস্থিত হওয়ার জন্য (হোভার), আপনাকে কোডটি প্রবেশ করতে হবে: li: হোভার উল {ডিসপ্লে: ব্লক; }
পদক্ষেপ 8
পছন্দসই লিঙ্ক এবং তালিকা আইটেম প্রদর্শন করার জন্য অতিরিক্ত বিকল্প সেট করুন।
পদক্ষেপ 9
পপ-আপ মেনু প্রস্তুত। এখন এটি.html ফাইলটিতে পপ-আপ মেনুতে বৈশিষ্ট্যটি অন্তর্ভুক্ত করা থেকে যায়
