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

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    

第二步 - 添加 CSS：

/* 为顶部导航添加黑色背景色 */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* 设置导航栏中链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* 添加一个活动类来突出显示当前页面 */
.active {
  background-color: #04AA6D;
  color: white;
}
/* 在小屏幕上隐藏应打开和关闭顶部导航的链接 */
.topnav .icon {
  display: none;
}
/* 下拉菜单容器 - 用于定位下拉菜单内容 */
.dropdown {
  float: left;
  overflow: hidden;
}
/* 设置下拉菜单按钮的样式以使其适应顶部导航栏 */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
/* 设置下拉菜单内容的样式（默认为隐藏） */
.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;
}
/* မိခင်သည် မှာ ပေါ်လာစဉ်တွင် အထိပ်ပေါ် နှင့် နောက်ခံစားရေးသားချက်များ အတွက် ရူပီကင်အောက်ခ�သဏ္ဌာန် အရောင်ဖြင့် သုံးစွဲရန် */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
/* မိခင်သည် မိခင်သည် မှာ ပေါ်လာစဉ်တွင် နောက်ခံစားရေးသားချက်များ အတွက် ရူပီကင်အောက်ခံသဏ္ဌာန် အရောင်ဖြင့် သုံးစွဲရန် */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
/* যখন ব্যবহারকারী ড্রপডাউন বাটনের উপর মাউস নিয়ে যাবে, ড্রপডাউন মেনু দেখাবো */
.dropdown:hover .dropdown-content {
  display: block;
}
/* যখন স্ক্রিন প্রস্থ কম হয় 600 পিক্সেলের নীচে, প্রথম লিঙ্ক ("হোম") বাইরে সমস্ত লিঙ্ককে লুকাবো এবং শীর্ষ নেভিগেশন বার (আইকন) খোলা/বন্ধ করতে লিঙ্ক দেখাবো */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* যখন ব্যবহারকারী আইকন ক্লিক করবে, জাভাস্ক্রিপ্ট শীর্ষ নেভিগেশন বারে "responsive" শ্রেণী যুক্ত করবে।এই শ্রেণী শীর্ষ নেভিগেশন বারকে ছোট স্ক্রিনে ভালোভাবে দেখাবে (সমস্ত লিঙ্ককে সামনের দিকে দেখাবে না কিন্তু ভারার দিকে দেখাবে) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

তৃতীয় পদক্ষেপ - জাভাস্ক্রিপ্ট যুক্ত করুন:

/* যখন ব্যবহারকারী আইকন ক্লিক করবে, শীর্ষ নেভিগেশন বারে "responsive" শ্রেণী যুক্ত করা হবে এবং তা অপসারিত করা হবে */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

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