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 - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

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

نظرات

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

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