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



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






ড্রপডাউন

নিচে ড্রপডাউন এর একটি উদাহরণ দেখুন।

উদাহরণ

<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</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>


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

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


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

এখানে ড্রপডাউন ব্যবহার একটি মেনুবার তৈরি করা হয়েছে। এই উদাহরণটি পূর্বের উদাহরণের মতই, পার্থক্য শুধুমাত্র ড্রপডাউন কন্টেন্টে লিংক যুক্ত করা হয়েছে।











উদাহরণ

<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;
}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.