چگونه ایجاد شود: منوی فروادی قابل کلیک

آموزش نحوه استفاده از CSS و JavaScript برای ایجاد منوی فروادی قابل کلیک.

منوی فروادی قابل کلیک ایجاد کنید

یک منوی فروادی ایجاد کنید که هنگام کلیک کاربر ظاهر شود.

مرحله اول - اضافه کردن HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">پیوند 1</a>
    <a href="#">پیوند 2</a>
    <a href="#">پیوند 3</a>
  </div>
</div>

توضیح مثال:

می‌توان از هر عنصری برای باز کردن منو فلاپ‌داون استفاده کرد، به عنوان مثال عنصر <button>، <a> یا <p>.

از عنصر محفظه (مانند <div>) برای ایجاد منو فلاپ‌داون استفاده کنید و لینک‌های منو فلاپ‌داون را در آن اضافه کنید.

از عنصر <div> برای احاطه بر دکمه و <div> استفاده کنید، تا منو فلاپ‌داون را با استفاده از CSS قرار دهید.

مرحله دوم - اضافه کردن CSS:

/* دکمه فلاپ‌داون */
.dropbtn {
  رنگ‌پوش: #3498DB;
  رنگ: سفید;
  حاشیه: 16px;
  اندازه‌ی فونت: 16px;
  حاشیه: هیچ;
  pointer: pointer;
}
/* موهنه موس بر روی دکمه فلاپ‌داون و تمرکز بر روی آن */
.dropbtn:hover, .dropbtn:focus {
  رنگ‌پوش: #2980B9;
}
/* محفظه <div> - برای قرار دادن عناصر لازم برای قرارگیری منو فلاپ‌داون */
.dropdown {
  موقعیت: نسبی;
  نمایش: درون‌خطی;
}
/* محتوای منو فلاپ‌داون (به صورت پیش‌فرض مخفی) */
.dropdown-content {
  نمایش: نه;
  موقعیت: تعاملی;
  رنگ‌پوش: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* لینک‌های داخل منو فلاپ‌داون */
.dropdown-content a {
  رنگ: سیاه;
  حاشیه: 12px 16px;
  text-decoration: none;
  نمایش: بلاک;
}
/* موهنه موس بر روی لینک‌های منو فلاپ‌داون تغییر رنگ می‌دهد */
.dropdown-content a:hover {background-color: #ddd;}
/* منوی فیلتر شده نمایش داده می‌شود (هنگام کلیک کاربر بر روی دکمه منوی فیلتر شده، این کلاس به مخزن .dropdown-content اضافه می‌شود) */
.show {display:block;}

توضیح مثال:

ما برای دکمه منوی فیلتر شده رنگ پس‌زمینه، فضای داخلی، اثرات ماوس و غیره تنظیمات استایل انجام دادیم.

.dropdown کلاس استفاده می‌کنیم position:relative، زمانی که می‌خواهیم محتوای منوی فیلتر شده را در زیر دکمه منوی فیلتر شده قرار دهیم (با استفاده از position:absolute)، این ضروری است.

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

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

مرحله سوم - اضافه کردن JavaScript:

/* هنگام کلیک کاربر بر روی دکمه، حالت مخفی و نمایش منوی فیلتر شده تغییر می‌کند */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// اگر کاربر در بیرون منوی فیلتر شده کلیک کند، منوی فیلتر شده بسته شود
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

آزمایش شخصی

صفحات مرتبط

آموزش‌ها:منوهای کشویی CSS

آموزش‌ها:چگونه منوی کشویی با قرارگیری ایجاد کنیم