٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش CSS Dropdowns

با CSS یک کرکره کشویی قابل حمل ایجاد کنید. نسخه ی نمایشی: نمونه های کشویی ماوس را روی نمونه های زیر حرکت دهید: کرکره پایه یک جعبه کشویی ایجاد کنید که وقتی کاربر ماوس را روی یک عنصر حرکت می…

محمد یوسفی

12 جولای 2021

با CSS یک کرکره کشویی قابل حمل ایجاد کنید.


نسخه ی نمایشی: نمونه های کشویی

ماوس را روی نمونه های زیر حرکت دهید:

کرکره پایه

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

مثال

<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> یا یک دکمه <.

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

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

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

.dropdown-contentکلاس دارای محتوای کرکره واقعی. به طور پیش فرض پنهان است و در شناور نمایش داده می شود (به زیر مراجعه کنید). توجه داشته باشید که min-widthروی 160px تنظیم شده است. در صورت تمایل می توانید این مورد را تغییر دهید. نکته: اگر می خواهید عرض محتوای کشویی به اندازه دکمه کشویی گسترده باشد ، آن را روی width100٪ تنظیم کنید (و 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>

راست چین راست محتوای کرکره ای

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

مثال

.dropdown-content {
  right: 0;
}

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

تصویر کشویی

نحوه افزودن تصویر و سایر مطالب در داخل کادر کشویی.

Dropdown Navbar

نحوه افزودن منوی کشویی در داخل نوار پیمایش.

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها