একটি দুর্দান্ত ড্রপডাউন মেনু কেবল জাভাস্ক্রিপ্টেই নয়, মানক এইচটিএমএল ট্যাগ ব্যবহার করে তৈরি করা যেতে পারে। ড্রপ-ডাউন মেনু তৈরির এই পদ্ধতিটি তাদের জন্য কার্যকর হবে যারা কেবলমাত্র সাইট তৈরির জন্য প্রথম পদক্ষেপ শুরু করছেন এবং পৃষ্ঠাগুলিতে মেনু তৈরির কাজটি আরও সহজ করতে চান।
নির্দেশনা
ধাপ 1
এইচটিএমএল কোডে, এই জাতীয় মেনু হ'ল ভিতরে তালিকাভুক্ত তালিকা সহ একটি আনর্ডারড তালিকা। শুরু করতে, একটি স্টাইল.এসএস ফাইল তৈরি করুন এবং মেনুটিকে স্টাইল এবং ফর্ম্যাট করতে নিম্নলিখিত সিএসএস কোডটি অনুলিপি করুন:
# নাভ, # নাভ উল
তালিকা-শৈলী: কিছুই নয়;
মার্জিন: 0;
প্যাডিং: 0;
সীমানা: 1px কঠিন # 000;
পটভূমি: # 515151;
ভাসা: বাম;
প্রস্থ: 100%;
}
# নাভ লি {
ভাসা: বাম;
অবস্থান: আপেক্ষিক;
পটভূমি-রঙ: # 003366;
back / গ্রাউন্ড: কোনটি নয়;
}
# নাভ লী উল
প্রদর্শন: কিছুই নয়;
অবস্থান: পরম;
পটভূমি-রঙ: # 003366;
প্যাডিং: 8 পিএক্স 0;
প্রস্থ: 138px;
}
ধাপ ২
এখন আমাদের মেনু আইটেমগুলিতে কিছু সজ্জা যুক্ত করতে হবে। তাদের জন্য প্রস্থ এবং উচ্চতা নির্ধারণ করুন, আন্ডারলাইন রেখাগুলি সরান, প্রতিটি লিঙ্কের জন্য একটি স্পষ্ট প্রস্থ নির্ধারণ করুন এবং পছন্দসই ব্যাকগ্রাউন্ডের রং নির্দিষ্ট করুন।
ধাপ 3
এই সমস্ত পরিবর্তনের জন্য, ফাইলটিতে নিম্নলিখিত কোড যুক্ত করুন:
# নাও এ {
রঙ: # fff;
পাঠ্য-সজ্জা: কিছুই নয়;
প্রদর্শন ব্লক;
প্রস্থ: 120px;
প্যাডিং: 4px 10px;
পটভূমি-রঙ: # 003366 পুনরাবৃত্তি- y ডান;
}
# নাভ এ: হোভার {
রঙ: # 000;
পটভূমি-রঙ: # 0033FF;
}
# নাভি লি: হোভার {
পটভূমির রঙ: # 333333;
}
তারপরে মেনুটি চূড়ান্ত করতে নিম্নলিখিত কোডের টুকরো যুক্ত করুন:
# নাভ লি: হোভার লি উল
প্রদর্শন: কিছুই নয়;
প্রস্থ: 138px;
শীর্ষ: -9px;
বাম: 133px;
}
# নন লি: হোভার লি: হোভার উল
প্রদর্শন ব্লক;
}
পদক্ষেপ 4
এইচটিএমএল সংস্করণে, সাধারণ আনর্ডার্ড করা মেনু তালিকাটি এর মতো দেখাচ্ছে - এর ভিত্তিতে, মেনুটি তৈরি করা হয়, যা নিবন্ধে উল্লেখ করা হয়েছিল।
- বাড়ি
-
ক্যাটালগ
-
সব পণ্য
- তারিখ অনুসারে
- নির্মাতারা
- অন্যান্য
-
