قائمة منسدلة 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 بشكل صحيح.
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>
محتويات القائمة المنسدلة المعدلة للتكامل مع اليمين
إذا كنت ترغب في أن تبدأ قائمة النافذة المنسدلة من اليمين بدلاً من اليسار، فأضف اليمين: 0;:
مثال
.dropdown-content {
اليمين: 0;
}
مزيد من الأمثلة
1 - الصورة المنسدلة
كيفية إضافة الصور والأجهزة الأخرى في النافذة المنسدلة.
ضع سهم الماوس فوق الصورة:
2 - قائمة منسدلة
كيفية إضافة قائمة منسدلة في قائمة التوجيه.
- الصفحة السابقة شريط التصفح الأفقي CSS
- الصفحة التالية مكتبة الصور CSS
