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

পূর্ব পৃষ্ঠা 级联下拉菜单
下一页侧边导航栏中的下拉菜单

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

নেভিগেশন বারের ড্রপডাউন মেনু

ড্রপডাউন মেনু নেভিগেশন বার তৈরি করুন

যখন ব্যবহারকারী নেভিগেশন বারের ইলেমেন্টের ওপর মাউস লোকেশন করে, একটি ড্রপডাউন মেনু দেখা যাবে。

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

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">লিঙ্ক 1</a>
      <a href="#">লিঙ্ক 2</a>
      <a href="#">লিঙ্ক 3</a>
    </div>
  </div>
</div>

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

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

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

একটি <div> ইলেমেন্ট ব্যবহার করে বাটন এবং আরেকটি <div> ইলেমেন্টকে বারবার যোগ করুন যাতে সিএসএস সঠিকভাবে ড্রপডাউন মেনু স্থাপন করা যায়。

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

/* নেভিগেশন বার কন্টেনার */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* নেভিগেশন বারের লিঙ্ক */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ড্রপডাউন কন্টেনার */
.dropdown {
  float: left;
  overflow: hidden;
}
/* ড্রপডাউন বাটন */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* মোবাইলের ভিত্তিতে সামান্য উপরোক্তি অত্যন্ত গুরুত্বপূর্ণ */
  margin: 0; /* মোবাইলের ভিত্তিতে উল্লম্ব উপরোক্ত গঠনের জন্য গুরুত্বপূর্ণ */
}
/* মাউসকে সুইং করার সময় নেভিগেশন বার লিঙ্ককে লাল ব্যাকগ্রাউন্ড কালার দেওয়া হবে */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* ড্রপডাউন মেনুর কনটেন্ট (ডিফল্টে লুকিয়ে থাকে) */
.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 {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* মাউসকে সুইং করার সময় ড্রপডাউন মেনুর লিঙ্ককে গ্রীষ্মকালীন ব্যাকগ্রাউন্ড কালার দেওয়া হবে */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* মাউসকে সুইং করার সময় ড্রপডাউন মেনু দেখানো হবে */
.dropdown:hover .dropdown-content {
  display: block;
}

আপনাদের নিজেদের চেষ্টা করুন

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

আমরা নেভিগেশন বার ও নেভিগেশন বার লিঙ্কের ব্যাকগ্রাউন্ড কালার, প্যাডিং ইত্যাদির শৈলী নিয়েছি

আমরা ড্রপডাউন মেনু বাটনের ব্যাকগ্রাউন্ড কালার, প্যাডিং ইত্যাদির শৈলী নিয়েছি

.dropdown শ্রেণী .dropdown-content কোনোর ডিভার্সিটি

.dropdown-content শ্রেণী ব্যবহার করেছি যাতে একটি কার্ড হিসাবে ড্রপডাউন মেনুকে দেখানো যায়।এটা ডিফল্টে লুকিয়ে আছে, এবং মাউসকে সুইং করার সময় দেখানো হয় (উল্লেখ করা হলো)।লক্ষ্য করুন, ন্যূনতম প্রস্থ সংযোজন করা হয়েছে 160px।এই সেটিংকে একবার কিছুই পরিবর্তন করা যায়。

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

:hover সিলেক্টর ব্যবহার করা হয়েছে যাতে ব্যবহারকারী মাউসকে ড্রপডাউন মেনু বাটনের উপর নিয়ে আসলে ড্রপডাউন মেনু দেখানো যায়。