সিএসএস ড্রপডাউন মেনু
- পূর্ববর্তী পৃষ্ঠা সিএসএস অনুভূমিক নেভিগেশন বার
- পরবর্তী পৃষ্ঠা সিএসএস ইমেজ লাইব্রেরি
পরামর্শ দেওয়া হয়:
CSS দ্বারা হোভার করা যায় নাফিল তালিকা তৈরি করা হয়。
ইনস্ট্যান্স
প্রদর্শন: নাফিল বানার ক্যাসেস
ছবি:
প্রাথমিক নাফিল বানার
ইনস্ট্যান্স
<style>
.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;
}
</style>
<div class="dropdown">
যখন ব্যবহারকারী ইলেমেন্টের ওপর মাউস সরানোর সময় নাফিল বানার বানার উপস্থিতি করা যায়。
<div class="dropdown-content">
<span>মাউস ওভার আমার ওপর</span>
</div>
</div>
<p>Hello World!</p>
উদাহরণস্বরূপ:
HTML
নাফিল বানার বানার অন্তর্ভুক্ত করে, যেমন <div> ইলেমেন্ট বা অন্য কোনও ইলেমেন্টটি ব্যবহার করা যায়。
<div> ইলেমেন্টসমূহকে একত্রিত করে, CSS দ্বারা নাফিল বানার বানার সঠিক অবস্থান নির্ধারণ করুন。
CSS
.dropdown শ্রেণী ব্যবহার করা হয় position: relativeএবং যখন আমরা নাফিল বানার বানার মূলতঃ নাফিল বাটনের নীচে রাখতে চাই (ব্যবহার position: absoluteএর সময় এই শ্রেণী ব্যবহার করা হয়。
.dropdown-content শ্রেণী সংরক্ষণ করা হয় যাতে কার্যকরী নাফিল বানার বানার মধ্যকার অংশটি। ডিফল্টভাবে এটি লুকিয়ে থাকে এবং হোভার হওয়ার সময় দেখা যাবে (দেখুন নিচে)। মনে রাখুন যেmin-width 160px হিসাবে সেট করা। এই সেটিং কোনও সময় পরিবর্তন করা যায়। টীকা: আপনি যদি নাফিল বাটনের চেয়ে নাফিল বানার চালকের প্রস্থতা একইরকম করতে চান, 100% হিসাবে প্রস্থতা সেট করুন (সেটিং overflow: auto ছোট স্ক্রীনের ওভারফ্লস রোলিং করা যায়。
আমরা সিএসএস ব্যবহার করেছি 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="#">লিঙ্ক 1</a>
<a href="#">লিঙ্ক 2</a>
<a href="#">লিঙ্ক 3</a>
</div>
</div>
ডানদিক সাজানো এক্সডাউন মেনুর কনটেন্ট
যদি আপনি চান যে এক্সডাউন মেনু ডানদিক থেকে বামদিকে প্রদর্শিত হোক, তাহলে right: 0;:
ইনস্ট্যান্স
.dropdown-content {
right: 0;
}
আরও ইনস্ট্যান্স
1 - এক্সডাউন ইমেজ
এক্সডাউন বক্সে ইমেজ ও অন্যান্য কনটেন্ট যোগ করতে কিভাবে
ইমেজের উপর মাউস পয়েন্টার টিপ করুন:
2 - এক্সডাউন নেভিগেশন
নেভিগেশন বারের এক্সডাউন মেনু যোগ করতে কিভাবে
- পূর্ববর্তী পৃষ্ঠা সিএসএস অনুভূমিক নেভিগেশন বার
- পরবর্তী পৃষ্ঠা সিএসএস ইমেজ লাইব্রেরি
