كيفية إنشاء: القائمة المنسدلة

تعلم كيفية إنشاء قائمة منسدلة باستخدام CSS.

أنشئ قائمة منسدلة قابلة للسحب

أنشئ قائمة منسدلة تظهر عند تحريك المستخدم للفأرة فوق العنصر.

الخطوة الأولى - إضافة HTML:

<div class="dropup">
  <button class="dropbtn">منسدلة</button>
  <div class="dropup-content">
    <a href="#">رابط 1</a>
    <a href="#">رابط 2</a>
    <a href="#">رابط 3</a>
  </div>
</div>

مثال توضيحي:

يمكن استخدام أي عنصر لفتح القائمة المنسدلة، مثل عناصر <button>، <a> أو <p>.

استخدم عنصر الحاوية (مثل <div>) لإنشاء القائمة المنسدلة، وأضف إليها روابط المنسدلة.

استخدم عنصر <div> لتغليف الزر و <div>، لضمان تحديد موضع القائمة المنسدلة بشكل صحيح باستخدام CSS.

الخطوة الثانية - إضافة CSS:

/* 下拉按钮 */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* عناصر <div> - تستخدم لتحديد العناصر المطلوبة لتحديد محتوى قائمة التسحب */
.dropup {
  position: relative;
  display: inline-block;
}
/* محتوى قائمة التسحب (مخفي بشكل افتراضي) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* الروابط في قائمة التسحب */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* تغيير لون رابط التسحب عند مرور الفأرة */
.dropup-content a:hover {background-color: #ddd}
/* عرض قائمة التسحب عند مرور الفأرة */
.dropup:hover .dropup-content {
  display: block;
}
/* عند عرض محتوى قائمة التسحب، تغيير لون زر التسحب */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

جرب بنفسك

مثال توضيحي:

لقد قمنا بتعيين الألوان الخلفية، والهوامش الداخلية، وما إلى ذلك للزر التسحب.

.dropup النوع باستخدام position:relative، عندما نريد وضع محتوى قائمة التسحب في أعلى زر التسحب (استخدام position:absolute)، هذا ضروري.

.dropup-content النوع يحتوي على قائمة التسحب الفعلية. إنه مخفي بشكل افتراضي، وسيتم عرضه عند مرور الفأرة عليه (انظر أدناه). يرجى ملاحظة، أن عرض الأقل هو 160px. يمكنك تغيير هذه القيمة حسب الحاجة. نصيحة: إذا كنت ترغب في أن يكون عرض محتوى قائمة التسحب متساويًا مع عرض زر التسحب، يمكنك تعيين العرض إلى 100% (وفي الشاشات الصغيرة) overflow:auto لتمكين التمرير).

لم نستخدم الحواف، بل استخدمنا box-shadow خصائص، لجعل قائمة التسحب تبدو كبطاقة. z-index ضع قائمة التسحب في مقدمة العناصر الأخرى.

:hover المستخدمون يعرضون قائمة التنقل عند وضع الماوس فوق زر التنقل الصاعد.