সিএসএস ড্রপডাউন
ড্রপডাউনের উদাহরণ
বেসিক ড্রপডাউন
একটি বেসিক ড্রপডাউন তৈরি করিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: teal;
color: white;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>হোভারেবল ড্রপডাউন</h2>
<div class="dropdown">
<span>এখানে মাউস আনুন</span>
<div class="dropdown-content">
<p>ড্রপডাউন টেক্সট</p>
</div>
</div>
</body>
</html>
ফলাফল
উদাহরণের বর্ণনা
এইচটিএমএলঃ
হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য একটি এলিমেন্ট ব্যবহার করতে হয়। যেমনঃ <span> অথবা <button> এলিমেন্ট।
ড্রপডাউন কন্টেন্ট রাখার জন্য কন্টেইনার হিসেবে একটি <div> এলিমেন্ট ব্যবহার করি।
সিএসএসঃ
.dropdown ক্লাসে position:relative ব্যবহার করা হয়েছে। এর কারণ আমরা position:absolute ব্যবহার করে কন্টেন্টগুলোকে বাটনের নিচে দেখাতে চাই।
.dropdown-content ক্লাসটির মধ্যে ড্রপডাউন কন্টেন্টগুলো রয়েছে এবং ইহা ডিফল্ট আকারে অদৃশ্য থাকে এবং মাউস নিয়ে গেলে শুধু দেখা যাবে। min-width 160px সেট করা হয়েছে।
ড্রপডাউন আইটেমকে একটি কার্ডের মত দেখানোর জন্য আমরা সিএসএস(৩) এর box-shadow প্রোপার্টি ব্যবহার করেছি।
:hover সিলেক্টরটি ব্যবহার করা হয়েছে ড্রাপডাউন বাটনের উপর মাউস নিয়ে গেলে ড্রপডাউন আইটেমকে প্রদর্শনের জন্য।
ড্রপডাউন মেনু
এই উদাহরণটি আগের উদাহরণের মতই, শুধু ড্রপডাউন কন্টেন্টে লিঙ্ক যোগ করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: teal;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: orange;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: bisque;
color: teal;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: orangered;
}
</style>
</head>
<body>
<h2>ড্রপডাউন মেনু</h2>
<div class="dropdown">
<button class="dropbtn">ড্রপডাউন মেনু</button>
<div class="dropdown-content">
<a href="#">কন্টেন্ট ১</a>
<a href="#">কন্টেন্ট ২</a>
<a href="#">কন্টেন্ট ৩</a>
</div>>
</div>
</body>
</html>
ফলাফল
রাইট-এলাইন ড্রপডাউন কন্টেন্ট
আপনি যদি ড্রপডাউন কন্টেন্টকে ড্রপডাউন বাটনের ডান থেকে শুরু করতে চান তাহলে right: 0; সেট করে দিনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: teal;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: orange;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: bisque;
color: teal;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: orangered;
}
</style>
</head>
<body>
<h2>এলাইন ড্রপডাউন কন্টেন্ট</h2>
<div class="dropdown" style="float:left;">
<button class="dropbtn">বাম</button>
<div class="dropdown-content" style="left:0;">
<a href="#">কন্টেন্ট ১</a>
<a href="#">কন্টেন্ট ২</a>
<a href="#">কন্টেন্ট ৩</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">ডান</button>
<div class="dropdown-content">
<a href="#">কন্টেন্ট ১</a>
<a href="#">কন্টেন্ট ২</a>
<a href="#">কন্টেন্ট ৩</a>
</div>
</div>
</body>
</html>
ফলাফল