منوهای کشویی (Dropdowns)
«منو کشویی (Dropdown)» یعنی محتوا با کلیک یا هاور ظاهر شود. «تریگر (Trigger)» همان عنصر شروع کننده است. معمولاً یک دکمه یا لینک است. سپس «محتوای کشویی» در یک ظرف مخفی می آید. مثل منوی بازی که با لمس، گزینه ها را نشان می دهد.
جعبه کشویی متنی
با position:relative روی ظرف و absolute روی محتوا، متن نمایان می شود.
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
Mouse over me!
<div class="dropdown-content">Hello World!</div>
</div>
دکمه منوی کشویی
یک دکمه بساز، لینک ها را داخل محتوا بگذار، و روی هاور نشان بده.
<style>
.dropdown {
position: relative;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</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;
}
تصویر داخل منوی کشویی
می توانی تصویر و توضیح را داخل محتوا بگذاری و روی هاور نمایش دهی.
<div class="dropdown">
<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50" />
<div class="dropdown-content">
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200" />
<div>Beautiful Cinque Terre</div>
</div>
</div>
منوی کشویی داخل نوار ناوبری
می توانی Dropdown را داخل منوی بالای سایت قرار دهی.
<!-- نمونه ساده: Dropdown در Navbar -->
<ul>
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Menu</a>
<div class="dropdown-content">
<a href="#l1">Link 1</a>
<a href="#l2">Link 2</a>
</div>
</li>
</ul>
نکات کاربردی سریع
- ظرف بیرونی relative باشد تا جایابی دقیق شود.
- محتوا absolute باشد و ابتدا مخفی بماند.
- روی :hover یا کلیک، display:block کن.
- برای راست به چپ، right:0 بسیار کمک می کند.
گام های عملی
- یک ظرف با کلاس dropdown بساز.
- داخلش عنصر تریگر قرار بده.
- یک div برای محتوای کشویی بساز.
- استایل relative و absolute را تنظیم کن.
- هاور یا کلیک را برای نمایش فعال کن.
بیشتر بخوان: منوهای کشویی، ناوبری افقی، نوار ناوبری.
جمع بندی سریع
- تریگر فعال می کند، محتوا نشان داده می شود.
- relative روی ظرف، absolute روی محتوا.
- هاور یا کلیک، نمایش را کنترل می کند.
- right:0 برای تراز راست مفید است.