CSS – منوهای بازشدنی (Dropdowns)

ساخت یک Dropdown ساده

برای ایجاد یک منوی dropdown که وقتی کاربر ماوس را روی یک عنصر می‌برد، ظاهر شود:

مثال:

<style>
/* Container اصلی dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* محتوای dropdown که به صورت پیش‌فرض مخفی است */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

/* نمایش محتوای dropdown هنگام حرکت ماوس */
.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

توضیحات:

  • از هر عنصر HTML مثل <span> یا <button> می‌توانید برای نمایش محتوای dropdown استفاده کنید.
  • position: relative برای قرارگیری درست محتوای dropdown استفاده می‌شود.
  • با استفاده از
    ، محتویات dropdown هنگام حرکت ماوس نمایش داده می‌شود.

ساخت منوی Dropdown

در این مثال، به جای متن ساده، لینک‌هایی داخل منوی dropdown قرار می‌گیرند:

مثال:

<style>
/* استایل دکمه dropdown */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Container اصلی dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* محتوای dropdown (به صورت پیش‌فرض مخفی است) */
.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 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* تغییر رنگ لینک‌ها هنگام hover */
.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* نمایش محتوای dropdown هنگام hover روی دکمه */
.dropdown:hover .dropdown-content {
  display: block;
}

/* تغییر رنگ دکمه dropdown وقتی محتوای dropdown نمایش داده می‌شود */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

محتوای راست‌چین در Dropdown

اگر بخواهید محتویات dropdown از راست به چپ باز شود، می‌توانید از ویژگی right: 0; استفاده کنید:

مثال:

<style>
.dropdown-content {
  right: 0; /* محتوای dropdown از راست باز شود */
}
</style>

این تنظیم باعث می‌شود که منوی dropdown از سمت راست عنصر dropdown باز شود، به جای اینکه از سمت چپ ظاهر شود.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.