ড্রপডাউনের উদাহরণ
মাউস আনুন !
ড্রপডাউন
ইমেজ ড্রপডাউনঃ
বেসিক ড্রপডাউন
একটি বেসিক ড্রপডাউন তৈরি করিঃ
kt_satt_skill_example_id=1176
উদাহরণের বর্ণনা
এইচটিএমএলঃ
হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য একটি এলিমেন্ট ব্যবহার করতে হয়। যেমনঃ <span> অথবা <button> এলিমেন্ট।
ড্রপডাউন কন্টেন্ট রাখার জন্য কন্টেইনার হিসেবে একটি <div> এলিমেন্ট ব্যবহার করি।
সিএসএসঃ.dropdown ক্লাসে position:relative ব্যবহার করা হয়েছে। এর কারণ আমরা position:absolute ব্যবহার করে কন্টেন্টগুলোকে বাটনের নিচে দেখাতে চাই।
.dropdown-content ক্লাসটির মধ্যে ড্রপডাউন কন্টেন্টগুলো রয়েছে এবং ইহা ডিফল্ট আকারে অদৃশ্য থাকে এবং মাউস নিয়ে গেলে শুধু দেখা যাবে। min-width 160px সেট করা হয়েছে।
ড্রপডাউন আইটেমকে একটি কার্ডের মত দেখানোর জন্য আমরা সিএসএস(৩) এর box-shadow প্রোপার্টি ব্যবহার করেছি।
:hover সিলেক্টরটি ব্যবহার করা হয়েছে ড্রাপডাউন বাটনের উপর মাউস নিয়ে গেলে ড্রপডাউন আইটেমকে প্রদর্শনের জন্য।
ড্রপডাউন মেনু
এই উদাহরণটি আগের উদাহরণের মতই, শুধু ড্রপডাউন কন্টেন্টে লিঙ্ক যোগ করা হয়েছেঃ
kt_satt_skill_example_id=1180
রাইট-এলাইন ড্রপডাউন কন্টেন্ট
আপনি যদি ড্রপডাউন কন্টেন্টকে ড্রপডাউন বাটনের ডান থেকে শুরু করতে চান তাহলে right: 0; সেট করে দিনঃ
kt_satt_skill_example_id=1186
Read more
