کیوں بنائیں: فلیپ ڈاؤن سائڈ بار

صفحه قبل باریک سمت چپ سمت بالا
صفحه بعد ناوبری پاسخگو با منوی کشيدني

داسٹی بار میں فلیپ ڈاؤن میوز کا تعلیم حاصل کریں

داسٹی بار میں فلیپ ڈاؤن میوز

پہلے قدم - اچیول ڈیوائس اضافہ کرنے

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

مثال توجیہ:

کوئی بھی عناصر کا استعمال کریں، مثلاً <button>،<a> یا <p> عناصر۔

کوئی کنٹینر عناصر (مثلاً <div>) کا استعمال کریں (مثلاً <div>) اور اس میں ڈراپ دون مین لنکس شامل کریں۔ ہم سائڈ بار کے اندر کے تمام لنکس کو ایک طرح کی شکل میں استعمال کریں گے۔

دوسرا قدم - سی ایس ایس اضافہ کریں:

/* پائیدار سائڈ بار ناویگیشن، پورا اونچائی */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* سائڈ بار لنکس اور ڈراپ دون مین بٹن کی شکل کا تعین */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}
/* مause پرسی کے وقت */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
/* محتوای اصلی */
.main {
  margin-left: 200px; /* به اندازه عرض نوار جانبی */
  font-size: 20px; /* بزرگتر کردن متن برای فعال کردن اسکرول */
  padding: 0px 10px;
}
/* به دکمه‌های منوی فلاپ فعال یک کلاس فعال اضافه کنید */
.active {
  background-color: green;
  color: white;
}
/* مخزن منوی فلاپ (به صورت پیش‌فرض مخفی است). اختیاری: برای محتوای منوی فلاپ یک پس‌زمینه روشن‌تر و یک حاشیه چپ بیشتر اضافه کنید تا طراحی خود را تغییر دهید */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}
/* اختیاری: تنظیمات استایل برای آیکون شاخک به پایین */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

آزمایش کنید

مرحله سوم - اضافه کردن جاوااسکریپت:

/* همه دکمه‌های منوهای فلاپ را جستجو کنید تا بین نمایش و مخفی کردن محتوای فلاپ خود بین آنها جابجا کنید - این اجازه می‌دهد که چندین منوی فلاپ داشته باشید بدون اینکه هیچگونه تداخل رخ دهد */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

آزمایش کنید