چگونه ایجاد شود: منوی کشویی

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

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

یک منوی کشویی ایجاد کنید که هنگام حرکت موس کاربر بر روی عنصر نمایش داده شود.

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

<div class="dropup">
  <button class="dropbtn">کشویی</button>
  <div class="dropup-content">
    <a href="#">لینک 1</a>
    <a href="#">لینک 2</a>
    <a href="#">لینک 3</a>
  </div>
</div>

توضیح مثال:

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

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

از عنصر <div> برای بسته‌بندی دکمه و <div> استفاده کنید، تا منوی کشویی را به درستی موقعیت‌دهی کنید.

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

/* پایین‌کلیک دکمه */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* عناصر مستند <div> - برای قرار دادن منوی کشیده نیاز به عناصر قرار دادن است */
.dropup {
  position: relative;
  display: inline-block;
}
/* محتوای منوی کشیده (به طور پیش‌فرض مخفی) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* لینک‌های منوی کشیده */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* رنگ لینک‌های کشیده هنگام قرارگیری ماوس را تغییر دهید */
.dropup-content a:hover {background-color: #ddd}
/* هنگام قرارگیری ماوس، منوی کشیده نمایش داده می‌شود */
.dropup:hover .dropup-content {
  display: block;
}
/* هنگام نمایش محتوای منوی کشیده، رنگ پس‌زمینه دکمه کشیده را تغییر دهید */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

آزمایش کنید

توضیح مثال:

ما برای دکمه کشیده رنگ پس‌زمینه، حاشیه داخلی و سایر استایل‌ها را تنظیم کرده‌ایم.

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

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

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

:hover این انتخابگر برای نمایش منوی کشویی استفاده می‌شود که زمانی که کاربر موس را بر روی دکمه کشویی قرار می‌دهد، نمایش داده می‌شود.