কিভাবে তৈরি করা যায়: ড্রপডাউন মেনু

কিভাবে CSS দিয়ে ড্রপডাউন মেনু তৈরি করা যায় শিখুন

হংফা ড্রপডাউন মেনু তৈরি করুন

একটি ড্রপডাউন মেনু তৈরি করুন যা যখন ব্যবহারকারী এলিমেন্টের উপর মাউস লোকেশন করবেন তখন দেখা যাবে。

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="dropup">
  <button class="dropbtn">Dropup</button>
  <div class="dropup-content">
    <a href="#">লিঙ্ক 1</a>
    <a href="#">লিঙ্ক 2</a>
    <a href="#">লিঙ্ক 3</a>
  </div>
</div>

উদাহরণ ব্যাখ্যা:

ড্রপডাউন মেনু খুলতে কোনো এলিমেন্ট ব্যবহার করা যেতে পারে, যেমন <button>、<a> বা <p> এলিমেন্ট。

ড্রপডাউন মেনু তৈরি করতে কন্টেনার এলিমেন্ট (যেমন <div>) ব্যবহার করেন এবং তার মধ্যে ড্রপডাউন লিঙ্ক যোগ করুন。

বাটন এবং <div> এলিমেন্টকে <div> এলিমেন্টের মধ্যে রেখে সিএসএসি দিয়ে ড্রপডাউন মেনুটি সঠিকভাবে স্থাপন করুন。

দ্বিতীয় পদক্ষেপ - সিএসএসি যোগ করুন:

/* ড্রপডাউন বাটন */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* কন্টেন্ট <div> - উপরোলা মেনুর কনটেন্টকে স্থানান্তরিত করতে প্রয়োজনীয় তথ্য */
.dropup {
  position: relative;
  display: inline-block;
}
/* উপরোলা মেনুর কনটেন্ট (ডিফল্টভাবে লুকিয়ে) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ড্রপডাউন মেনুতের লিঙ্ক */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* মাউস অবস্থানকরানোর সময় উপরোলা লিঙ্কের কালার পরিবর্তন করুন */
.dropup-content a:hover {background-color: #ddd}
/* মাউস অবস্থানকরানোর সময় উপরোলা মেনু দেখানো */
.dropup:hover .dropup-content {
  display: block;
}
/* যখন উপরোলা মেনুর কনটেন্ট দেখানো হয়, উপরোলা বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করুন */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

সরাসরি প্রয়োগ করুন

উদাহরণ ব্যাখ্যা:

আমরা উপরোলা বাটনের ব্যাকগ্রাউন্ড কালার, প্রাইভাট, এবং অন্যান্য স্টাইল সেট করি。

.dropup শ্রেণী ব্যবহার করি position:relativeযখন আমরা উপরোলা মেনুর কনটেন্টকে উপরোলা বাটনের উপরে রাখতে চাই (ব্যবহার) position:absoluteঅপরিহার্য)।

.dropup-content শ্রেণী আসল উপরোলা মেনুকে ধারণ করে। এটি ডিফল্টভাবে লুকিয়ে থাকে এবং মাউস অবস্থানকরানোর সময় দেখানো হবে (উল্লেখ নীচে)। অত্যন্ত পরামর্শ: আপনি যদি উপরোলা মেনুর কনটেন্টের প্রস্থ উপরোলা বাটনের সমান করতে চান, তবে প্রস্থ সেট করুন 100% (এবং ছোট স্ক্রিনের সাথে) overflow:auto রোলিং করতে চাই (।)

ব্রেডার ব্যবহার করছি না, বরং box-shadow প্রতিশব্দ, যাতে উপরোলা মেনু একটি 'কার্ড' হিসাবে দেখানো যায়। আমরা পাশাপাশি z-index উপরোলা মেনুটিকে অন্য তথ্য উপাদানগুলির আগে রাখুন。

:hover 选择器用于在用户将鼠标悬停在上拉按钮上时显示上拉菜单。