תפריט נפתח

חלק מהיחידה פיתוח 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:

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