কিভাবে তৈরি: নেভিগেশন বারের "More" বাটন

কিভাবে "More" বাটন তৈরি করা যায় শিখুন

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

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

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

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <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> ইলেমেন্টকে বেঁধে রাখুন যাতে সিএসএস প্রকাশ সঠিকভাবে হয়。

পদক্ষেপ 2 - সিএসএস যোগ করুন:

/* নেভিগেশন বার কন্টেনার */
.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 সিলেক্টর ব্যবহার করা হয় ড্রপডাউন মেনুটি দেখানোর জন্য যখন ব্যবহারকারী মাউসকে ড্রপডাউন মেনু বাটনের উপর নিয়ে যায়

সংশ্লিষ্ট পৃষ্ঠ

শিক্ষাদান:সিএসএস ড্রপডাউন মেনু

শিক্ষাদান:কিভাবে ক্লিকযোগ্য ড্রপডাউন মেনু তৈরি করা যায়

শিক্ষাদান:সিএসএস নেভিগেশন বার

শিক্ষাদান:রেসপন্সিভ ট็প নেভিগেশন বার কিভাবে তৈরি করা যায়