کیسے بٹن بٹسکتا ہے: ناویگیشن بار میں بٹن

پیشین پیغام دکمه‌های صفحه بعد/قبل
صفحه بعدى دکمه‌های بلوک

کیسے بٹن بٹسکتا ہے؟

ناویگیشن بار میں "بیشتر" بٹن

ایک ڈراپ ڈاؤن منو ناویگیشن بار بنائیں

کہیں کاربر ناویگیشن بار کے اندر کسی عنصر پر موس کا پیمانہ لگا دیا تو اپنی ڈراپ ڈاؤن منو نمودار کی جائے گی。

پہلے قدم - ایچ تی ایم ایل شامل کریں:

<div class="navbar">
  <a href="#home">خانه</a>
  <a href="#news">اخبار</a>
  <div class="dropdown">
    <button class="dropbtn">بیشتر
      <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 بخش‌های. این یک عنصر <div> است، نه عنصر <a>، بنابراین باید آن را شناور کنید تا در کنار لینک باقی بماند.

.dropdown-content کلاس شامل منوهای فلاپ‌دون واقعی استفاده کرده‌ایم. این به طور پیش‌فرض مخفی است و در هنگام قرار گرفتن موس بر روی آن نمایش داده می‌شود (در ادامه مشاهده می‌کنید). توجه داشته باشید که حداقل عرض تنظیم شده به 160px است. این تنظیم را به دلخواه تغییر دهید.

ما از لبه‌ها استفاده نکرده‌ایم بلکه از box-shadow ویژگی، منوهای فلاپ‌دون را مانند یک کارت به نظر می‌رساند. ما همچنین از z-index منوهای فلاپ‌دون را در جلوی عناصر دیگر قرار دهید.

:hover انتخابگرها برای نمایش منوهای فلاپ‌دون در هنگام جابجایی موس کاربر بر روی دکمه منوهای فلاپ‌دون.