X

X

X

CSS Dropdowns । ড্রপডাউন


সিএসএস এর মাধ্যমে hoverable dropdown তৈরি করার পদ্ধতি।


ড্রপডাউন মেনুর উদাহরণ

নিচের উদাহরণগুলোর উপরে মাউস রাখুন, তাহলে ফলাফল দেখতে পারবেন:


Basic Dropdown

কোনো ইলামেন্টের উপর যখন মাউস রাখা হয়, তখন সেই অবস্থাকে মাউস হোভার করা বলে। নিচে একটি মাউস হোভারেবল মেনু তৈরি করে দেখানো হলো:

Code Example

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা নিচে দেওয়া হলো

ড্রপডাউন মেনু তৈরি করার জন্য সাধারণত দুধরণের কোড বা উপাদন প্রয়োজনীয়। যেমন, HTML ও CSS । HTML দিয়ে মূলত স্ট্রাকচার ও CSS দিয়ে এটিকে একটি কার্যকরী ড্রপডাউন মেনুতে রূপান্তরিত করা যায়। এটিকে আরও ইন্টারএকটিভ করার জন্য জাভাস্ক্রিপ্টও ব্যবহার করা যায়।

HTML) ড্রপডাউনের কন্টেন্টকে Open করার জন্য <span>, অথবা <button> ইত্যাদি যেকোনো ইলামেন্ট ব্যবহার করতে হবে।

(<div>) বা এজাতীয় কোনো ইলামেন্ট ব্যবহার করে ড্রপডাউনের কন্টেন্ট রাখার জন্য কন্টেইনার তৈরি করুন। এবার সিএসএস ব্যবহার করে উক্ত ইলামেন্টে ড্রপডাউন কন্টেন্টকে সঠিক অবস্থানে উপস্থাপণ করুন।

CSS) .dropdown class এ position:relative সেট করা হয়, কারণ এর মাধ্যমে কন্টেন্টকে সঠিক অবস্থানে উপস্থাপণ করা যায়।

.dropdown-content class বিশিষ্ট ইলামেন্ট মূল কন্টেন্টকে ধারণ করে। এটি সাধারণত দৃশ্যমান হয় না। লক্ষ্য করুণ min-width এর মান 160px সেট করা হয়েছে। ইচ্ছেমত যেকোনো মান সেট করতে পারেন।

টিপস: যদি ড্রপডাউনের প্রস্থ বাটনের প্রস্থের সমান মান বিশিষ্ট করতে চান তবে ড্রপডাউন কন্টেন্টের width:100% সেট করুন এবং (overflow:auto ) অবশ্যই সেট করবেন।

বর্ডার ব্যবহার না করে, CSS3 box-shadow property ব্যবহার করা হয়েছে, যাতে এটি একটি কার্ডের মত দৃশ্যমান হয়।

:hover selector দিয়ে যখন বাটনের উপর মাউস রাখা হয়, তখন যাতে ড্রপডাউন কন্টেন্ট দৃশ্যমান হয়।


Dropdown Menu

ড্রপডাউন মেনু তৈরি করার মাধ্যমে কোনো লিস্ট থেকে লিস্ট আইটেম সিলেক্ট করা যায়:

এই উদাহরণটি আগেরটির মত। তবে এটিতে লিংক যুক্ত করা হয়েছে, যাতে আইটেম গুলো লিংক ধারণ করতে পারে এবং ক্লিকেবল হয়:

Code Example

<style>
.dropbtn {
    background-color: #4CAF50;
    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: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Right-aligned Dropdown Content

যদি ড্রপডাউন মেনুকে ডান থেকে বাম দিকে দৃশ্যমান করতে চান তবে right: 0; সেট করুন।

Code Example

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

Code Example

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.desc {
    padding: 15px;
    text-align: center;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।