مقدمه
یک منوی کشویی ایجاد کنید که وقتی کاربر ماوس را روی یک عنصر حرکت می دهد ظاهر شود.
مرحله 1) اضافه کردن HTML:
<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>مثال توضیح داده شد
از هر عنصری برای باز کردن منوی کشویی استفاده کنید، به عنوان مثال. یک عنصر <button>، <a> یا <p>.
از یک عنصر ظرف (مانند <div>) برای ایجاد منوی کشویی و اضافه کردن پیوندهای کشویی در داخل آن استفاده کنید.
یک عنصر <div> را در اطراف دکمه و <div> بپیچید تا منوی کشویی به درستی با CSS قرار گیرد.
مرحله 2) CSS را اضافه کنید:
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
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: #ddd;}
/* 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;}مثال توضیح داده شده
ما دکمه کشویی را با رنگ پس زمینه، padding و غیره استایل داده ایم.
کلاس .dropdown از position:relative استفاده می کند که زمانی لازم است که محتوای کشویی درست زیر دکمه کشویی قرار گیرد (با استفاده از position:absolute).
کلاس .dropdown-content منوی کشویی واقعی را نگه می دارد. به طور پیش فرض پنهان است و در حالت شناور نمایش داده می شود (به زیر مراجعه کنید). توجه داشته باشید که عرض حداقل بر روی 160 پیکسل تنظیم شده است. با خیال راحت این را تغییر دهید. نکته: اگر میخواهید عرض محتوای کشویی به اندازه دکمه کشویی باشد، عرض را روی 100٪ تنظیم کنید (و سرریز: خودکار را برای فعال کردن اسکرول در صفحههای کوچک).
بهجای استفاده از حاشیه، از ویژگی box-shadow استفاده کردهایم تا منوی کشویی شبیه یک «کارت» شود. همچنین از z-index برای قرار دادن کشویی در مقابل عناصر دیگر استفاده می کنیم.
انتخابگر :hover برای نشان دادن منوی کشویی زمانی که کاربر موس را روی دکمه کشویی حرکت می دهد استفاده می شود.
