منوی کشویی

« صفحهٔ قبل

صفحهٔ بعد »

ساخت یک منوی کشویی قابل hover شدن با CSS.

نسخهٔ نمایشی: مثال های Dropdown

نشانه‌گر موس را روی مثال‌های زیر ببرید:

منوی کشویی ساده

ساخت یک جعبه کشویی ساده که هنگام قرار گرفتن نشانه‌گر موس بر روی عنصر، ظاهر می‌شود.

مثال

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.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: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> استفاده کنید.

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

قرار دادن یک عنصر <div> دور عناصر برای موقعیت دهی صحیح محتوای کشویی با CSS.

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

کلاس .dropdown-content محتوای واقعی کشویی را نگه می‌دارد. به صورت پیش‌فرض مخفی است، و در هنگام قرارگیری موس روی عنصر (hover) نمایش داده خواهد شد. (مثال پایین را ببینید). توجه داشته باشید که ویژگی min-width برلبر با 160px تنظیم شده‌است. می توانید آن را تغییر دهید . نکته: اگر می‌خواهید عرض محتوای کشویی برابر با اندازه کلید کشویی باشد، ویژگی width را برابر با ۱۰۰٪ تنظیم کنید (و overflow:auto را برای فعال سازی پیمایش در صفحات کوچک استفاده کنید).

به جای استفاده از یک کادر، از ویژگی box-shadow در CSS برای اینکه منوی کشویی شبیه به یک «کارت» باشد استفاده کرده‌ایم.

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

منوی کشویی

یک منوی کشویی ایجاد می کند که به کاربر اجازه می‌دهد یک گزینه را از لیست انتخاب کند:

این مثال بسیار شبیه به مثال قبل است، با این تفاوت که ما لینک‌هایی درون جعبه کشویی اضافه کرده‌ایم و آنها را استایل دهی کرده‌ایم تا برای یک کلید استایل دهی شده کشویی مناسب باشند:

مثال

<style>
/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.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;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.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

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

مثال

.dropdown-content {
  right: 0;
}

مشاهدهٔ نتیجه

مثالهای بیشتر

تصویر کشویی

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

اشاره گر ماوس خود را روی تصویر ببرید:

مثال

مشاهدهٔ نتیجه

Navbar کشویی

چگونه یک منوی کشویی درون ناحیه navigation اضافه کنیم.

مثال

مشاهدهٔ نتیجه

« صفحهٔ قبل

صفحهٔ بعد »