القائمة المنسدلة

جزء من قسم الواجهة الأمامية العملية في رحلة HTML على Coddy. الدرس 20 من 35.

القائمة المنسدلة عنصر تنقّل يعرض مزيدًا من الروابط عندما يمرّر المستخدم المؤشر فوقه أو يركّز عليه. رغم إمكانية إنشاء القوائم المنسدلة باستخدام JavaScript، نركّز في هذا الفصل على نهج يعتمد على CSS فقط، ويستخدم :hover أو :focus-within لإظهار القائمة المخفية.

لماذا تستخدمها:

توفر مساحة في أشرطة التنقل.
تحافظ على واجهة نظيفة ومنظمة.
تعمل بشكل جيد مع التصميمات التي تعطي الأولوية للأجهزة المحمولة والتصميمات المتجاوبة عند تكييفها بشكل مناسب.

HTML:

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

CSS:

//The .dropdown is position: relative 
//so the dropdown content can be positioned correctly with position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//The .dropdown-content is hidden by default using display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//When the user hovers over the .dropdown container, 
//the .dropdown-content is shown using display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

باستخدام هذا الرمز، سيظهر محتوى القائمة المنسدلة عند تمرير المؤشر فوق حاويتها (بما في ذلك الزر).

التحدي

سهل

أُعطيتَ HTML لقائمة منسدلة تحتوي على زر يحمل التسمية "Select Color" وثلاثة خيارات: Red, Green, Blue.

مهمتك هي تنسيق القائمة المنسدلة باستخدام CSS بحيث:

تكون الخيارات مخفية افتراضيًا.
تصبح الخيارات مرئية عندما يمرر المستخدم المؤشر فوق الحاوية المنسدلة.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown menu</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
      background-color: #f0f0f0;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: 1px solid #333;
      border-radius: 5px;
      background-color: #ffffff;
    }

    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #ffffff;
      min-width: 160px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #f2f2f2;
    }

    /* Show dropdown on hover or focus */
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {

    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="dropdown-button">Select Color</button>
    <div class="dropdown-content">
      <a href="#">Red</a>
      <a href="#">Green</a>
      <a href="#">Blue</a>
    </div>
  </div>

</body>
</html>