منوهای کشویی CSS
- صفحه قبلی ناوبری افقی CSS
- صفحه بعدی بایگانی تصاویر CSS
لیست‌های فروپینگ قابل فروپینگ با استفاده از 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> یا <button>.
محتوای فروپینگ را با استفاده از عناصر مخزن (مانند <div>) ایجاد کنید و هرگونه محتوایی را در آن اضافه کنید.
این عناصر را با استفاده از عناصر <div> محصور کنید و محتوای فروپینگ را به صورت دقیق‌تر قرار دهید.
CSS
.dropdown کلاس استفاده می‌شود، position: relative، زمانی که می‌خواهیم محتوای فروپینگ را در زیر دکمه‌ی فروپینگ قرار دهیم (با استفاده از position: absolute)، نیاز به استفاده از این کلاس است.
.dropdown-content کلاس محتوای واقعی فروپینگ را ذخیره می‌کند. به صورت پیش‌فرض مخفی است و در هنگام قرارگیری ماوس روی آن نمایش داده می‌شود (لطفاً به متن زیر نگاه کنید). توجه داشته باشید،min-width به 160px تنظیم شده است. این تنظیم را می‌توان در هر زمان تغییر داد. نکته: اگر می‌خواهید عرض محتوای فروپینگ با عرض دکمه‌ی فروپینگ یکسان باشد، عرض را به 100% تنظیم کنید (تنظیم overflow: auto می‌توان در صفحه‌های کوچک به صورت اسکرول اجرا کرد.
ما از CSS استفاده کرده‌ایم box-shadow ویژگی‌ها، نه لبه، منوی فلیپ‌داون مانند یک کارت به نظر می‌رسد.
وقتی کاربر ماوس خود را روی دکمه پایین حرکت می‌دهد،:hover انتخاب‌گر برای نمایش منوی فلیپ‌داون.
منوی فلیپ‌داون
یک منوی فلیپ‌داون ایجاد کنید و به کاربر اجازه دهید تا یک گزینه از لیست انتخاب کند:
این مثال مشابه مثال قبلی است، فقط ما به جعبه پایین خود لینک اضافه کرده‌ایم و برای آن استایل تنظیم کرده‌ایم تا با استایل دکمه پایین هماهنگ باشد:
مثال
<style>
/* 设置下拉按钮的样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.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);
z-index: 1;
}
/* 下拉链接 */
.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</button>
<div class="dropdown-content">
<a href="#">لینک 1</a>
<a href="#">لینک 2</a>
<a href="#">لینک 3</a>
</div>
</div>
محتوای فله‌ای چپ‌گرا
اگر می‌خواهید منوی فله‌ای از راست به چپ باشد و نه از چپ به راست، لطفاً اضافه کنید right: 0;:
مثال
.dropdown-content {
right: 0;
}
مثال‌های بیشتر
1 - تصویر فله‌ای
چگونه می‌توانید تصاویر و محتوای دیگر را به فهرست فله‌ای اضافه کنید.
لطفاً نشانگر ماوس خود را بر روی تصویر قرار دهید:
2 - منوهای فله‌ای
چگونه می‌توانید منوهای فله‌ای را به نوار ناوبری اضافه کنید.
- صفحه قبلی ناوبری افقی CSS
- صفحه بعدی بایگانی تصاویر CSS
