منو فلیپ‌داآن سی اس اس
- پچھلے پیج منو ناوبری افقی سی اس اس
- آئندہ پیج بایگانی تصاویر سی اس اس
منوهای فروپینگ قابل تکان‌دهی با استفاده از 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 معین کنید.
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>
راست چین کا ڈاؤن leveling مواد
اگر آپ چاہتے ہیں کہ ڈاؤن leveling ناویگیشن سمت راست سے بجائے سمت چپ سے شروع ہو، تو آپ کو راست: 0;:
مثال
.dropdown-content {
راست: 0;
}
بھی کچھ مثال
1 - ڈاؤن leveling تصویر
ناوگاہ میں ڈاؤن leveling میں تصویر اور دیگر مواد کا اضافہ کیسے کرسکتے ہیں۔
تصویر پر موس کا انگل بند کرسکتے ہیں:
2 - ڈاؤن leveling ناویگیشن
ناوگاہ میں ڈاؤن leveling میں آئیئنوئیئن اضافہ کیسے کرسکتے ہیں۔
- پچھلے پیج منو ناوبری افقی سی اس اس
- آئندہ پیج بایگانی تصاویر سی اس اس
