آموزش Dropdowns در CSS | آموزش کامل + نمونه کد

ویژگی dropdowns در CSS

ویژگی dropdown، ساختار اصلی یک منوی شناور در 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>

نکته: توجه داشته باشید که عرض حداقل روی 160 پیکسل تنظیم شده است، با خیال راحت ان را تغییر دهید.

نکته: اگر میخواهید عرض محتوای کشویی به اندازه دکمه کشویی باشد ، عرض را روی %100 تنظیم کنید.( و سرریز(auto : overflow را برای اسکرول در صفحه های کوچک تنظیم کنید.)

نکته: به جای استفاده از حاشیه، از ویژگی CSSbox-shadow استفاده کردیم تا منوی کشویی شبیه یک << کارت >> شود.

ویژگی dropdown-menu در CSS

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

dropdown menu

 <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>

محتوای کشویی راست و چپ که در یک ردیف قرار گرفته :

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

.dropdown-content {
  right: 0;
}

ویژگی dropdown image در css

Hover over the image:
Cinque Terre

ویژگی dropdown Navbar در css

    Home
    News
    Dropdown

Dropdown Menu inside a Navigation Bar

Hover over the "Dropdown" link to see the dropdown menu.

توسعه دهندگان

احسان اسلامی

ویژگی Dropdowns در CSS

ویژگی dropdowns در CSS

ویژگی dropdown-menu در CSS

ویژگی dropdown image در css

ویژگی dropdown Navbar در css