ساخت یک Dropdown ساده
برای ایجاد یک منوی dropdown که وقتی کاربر ماوس را روی یک عنصر می‌برد، ظاهر شود:
مثال:
<style>
/* Container اصلی dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* محتوای dropdown که به صورت پیش‌فرض مخفی است */
.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 هنگام حرکت ماوس */
.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>می‌توانید برای نمایش محتوای dropdown استفاده کنید. position: relativeبرای قرارگیری درست محتوای dropdown استفاده می‌شود.- با استفاده از ، محتویات dropdown هنگام حرکت ماوس نمایش داده می‌شود.
ساخت منوی Dropdown
در این مثال، به جای متن ساده، لینک‌هایی داخل منوی dropdown قرار می‌گیرند:
مثال:
<style>
/* استایل دکمه dropdown */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Container اصلی dropdown */
.dropdown {
position: relative;
display: inline-block;
}
/* محتوای dropdown (به صورت پیش‌فرض مخفی است) */
.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;
}
/* لینک‌های داخل dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* تغییر رنگ لینک‌ها هنگام hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* نمایش محتوای dropdown هنگام hover روی دکمه */
.dropdown:hover .dropdown-content {
display: block;
}
/* تغییر رنگ دکمه dropdown وقتی محتوای dropdown نمایش داده می‌شود */
.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
اگر بخواهید محتویات dropdown از راست به چپ باز شود، می‌توانید از ویژگی right: 0; استفاده کنید:
مثال:
<style>
.dropdown-content {
right: 0; /* محتوای dropdown از راست باز شود */
}
</style>این تنظیم باعث می‌شود که منوی dropdown از سمت راست عنصر dropdown باز شود، به جای اینکه از سمت چپ ظاهر شود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام