كيفية إنشاء: قائمة تنسق قابلة للنقر

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

إنشاء قائمة تنسق قابلة للنقر

إنشاء قائمة تنسق تظهر عند النقر على الزر.

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

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-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;
  cursor: pointer;
}
/* زر القائمة المنسدلة عند وضع المؤشر عليه أو التركيز عليه */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* عناصر المربعات <div> - تستخدم لتوجيه محتوى القائمة المنسدلة */
.dropdown {
  position: relative;
  display: inline-block;
}
/* محتوى القائمة المنسدلة (مخفي بشكل افتراضي) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  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: #ddd;}
/* اظهر قائمة النزول (عند النقر على زر قائمة النزول، يتم إضافة هذا الصنف إلى وحدة .dropdown-content) */
.show {display:block;}

توضيح الأمثلة:

قمنا بتعيين أنواع الألوان والرافعات والآثار عند النقر على الفأرة وما إلى ذلك لزر قائمة النزول.

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

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

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

الخطوة الثالثة - إضافة JavaScript:

/* عند النقر على الزر، قم بتشغيل/إيقاف تشغيل حالة العرض/الإخفاء لمحتوى قائمة النزول */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// إذا قام المستخدم بالنقر على خارج قائمة النزول، أغلق القائمة
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

تجربة بنفسك

الصفحات ذات الصلة

دليل:قائمة تنزيل CSS

دليل:كيفية إنشاء: قائمة تنزيل معلق