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

جزء من قسم Practical Frontend في رحلة 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:

//العنصر .dropdown له الخاصية position: relative 
//حتى يمكن تحديد موضع محتوى القائمة المنسدلة بشكل صحيح باستخدام position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//يتم إخفاء .dropdown-content افتراضيًا باستخدام display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//عندما يقوم المستخدم بتمرير الماوس فوق حاوية .dropdown، 
//يتم عرض .dropdown-content باستخدام display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

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

التحدي

سهل

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

مهمتك هي تنسيق القائمة المنسدلة باستخدام 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:

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

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

تستخدم حاوية القائمة المنسدلة position: relative بحيث يمكن تحديد موضع محتوى القائمة المنسدلة باستخدام position: absolute. يتم إخفاء المحتوى افتراضيًا باستخدام display: none ويظهر عند التمرير باستخدام display: block.

جرّب بنفسك

<!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>