সিএসএস ড্রপডাউন - CSS Dropdown


সিএসএস ব্যবহার করে খুব সহজেই ড্রপডাউন তৈরি করা যায়। নিচে কিছু সিএসএস ড্রপডাউন এর ব্যাবহারিক উদাহরন দেখুন।




একটি সাধারন ড্রপডাউন

সিএসএস এর position, display ইত্যাদি প্রোপার্টি গুলো ব্যবহার করে খুব সহজ ও সাধারন ভাবে কোন ড্রপডাউন তৈরি করা যায়। নিচে একটি সাধারন ড্রপডাউন তৈরি করার জন্য কিছু সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

<head>
  <style>
  .dropdown {
     position: relative;
     display: inline-block;
     background-color: #9999ff;
     padding: 10px;
     }
   
  .dropdown-content {
     display: none;
     position: absolute;
     background-color: #995511;
     min-width: 115px;
     box-shadow: 0px 9px 18px 0px rgba(0,0,0,0.2);
     padding: 10px;
     z-index: 1;
     }
   
  .dropdown:hover .dropdown-content {
     display: block;
     }
 </style>
</head>
<body>
  <div class="dropdown">
    <span>Mouse over me
    <div class="dropdown-content">
      <p>Hello World!</p>
    </div>
  </div>
</body>

কোড এডিটর


HTML কোডের বর্ণনা -
মাউস হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য কোন এইচটিএমএল এলিমেন্ট যেমন span এলিমেন্ট অর্থাৎ এইচটিএমএল <span> ট্যাগ অথবা button এলিমেন্ট অর্থাৎ <button> ট্যাগের মত কোন এলিমেন্ট ব্যবহার করতে হবে। এখানে আমরা span এলিমেন্ট অর্থাৎ এইচটিএমএল <span> ট্যাগ ব্যবহার করেছি। তারপরে ড্রপডাউন কন্টেন্ট রাখার জন্য কন্টেইনার হিসেবে একটি এইচটিএমএল div এলিমেন্ট অর্থাৎ <div> ট্যাগ ব্যবহার করা হয়েছে।

CSS কোডের বর্ণনা -
.dropdown ক্লাসে position:relative প্রোপার্টি ব্যবহার করা হয়েছে। এর কারণ আমরা position:absolute ব্যবহার করে কন্টেন্ট গুলোকে বাটনের নিচে দেখাতে চেয়েছি। .dropdown-content ক্লাসটির মধ্যে ড্রপডাউন কন্টেন্ট গুলো রয়েছে এবং এটি তার পূর্ব-নির্ধারিত বা default মানের জন্য অদৃশ্য থাকে এবং মাউস নিয়ে গেলেই শুধু দেখা যায়। min-width:115px নির্ধারণ করা হয়েছে। ড্রপডাউন আইটেমটিকে একটি বক্স বা কার্ডের মত প্রদর্শনের জন্য আমরা সিএসএস 3.0 এর box-shadow প্রোপার্টি ব্যবহার করেছি। তারপর :hover সিলেক্টরটি ব্যবহার করা হয়েছে যার ফলে ড্রাপডাউন বাটনের উপর মাউস নিয়ে গেলে ড্রপডাউন আইটেমটি প্রদর্শিত হয়।


ড্রপডাউন মেন্যু

এখানে সিএসএস এর ড্রপডাউন ব্যবহার একটি মেন্যুবার তৈরি করা হয়েছে। এই উদাহরণটিও আগের উদাহরণের মতই, এখানে পার্থক্য শুধুমাত্র ড্রপডাউন কন্টেন্ট গুলোতে লিংক যুক্ত করা হয়েছে অর্থাৎ এইচটিএমএল <a> ট্যাগ ব্যবহার করা হয়েছে। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।





উপরের উদাহরনটির জন্য, নিচের সিএসএস স্টাইল কোড গুলো দেখুন।

উদাহরণ

<style>
/* ড্রপডাউন বাটন স্টাইল */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* <div> কন্টেইনার এর অবস্থান নির্ধারণ করে */
.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>
<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: 0; প্রোপার্টি ব্যবহার করে মান নির্ধারণ করে দিতে হবে। নিচে এর জন্য সিএসএস স্টাইল কোডের উদাহরণ দেখুন।

উদাহরণ

.dropdown-content {
   right: 0;
   }

কোড এডিটর