Açılır menü

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 20 / 35.

Açılır menü, kullanıcı üzerine geldiğinde veya odaklandığında daha fazla bağlantı gösteren bir navigasyon öğesidir. Açılır menüler JavaScript kullanılarak oluşturulabilse de, bu bölümde gizli menüyü ortaya çıkarmak için :hover veya :focus-within kullanan, yalnızca CSS tabanlı bir yaklaşıma odaklanıyoruz.

Neden kullanılır:

Navigasyon çubuklarında yer tasarrufu sağlar.
Arayüzü temiz ve düzenli tutar.
Uygun şekilde uyarlandığında mobil öncelikli ve duyarlı tasarımlar için iyi çalışır.

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 özelliğine sahiptir 
// böylece açılır menü içeriği position: absolute ile doğru şekilde konumlandırılabilir.
.dropdown {
  position: relative;
  display: inline-block;
}

//.dropdown-content, display: none kullanılarak varsayılan olarak gizlenir.
.dropdown-content {
  display: none;
  position: absolute;
}

//Kullanıcı .dropdown kapsayıcısının üzerine geldiğinde, 
//.dropdown-content, display: block kullanılarak gösterilir.
.dropdown:hover .dropdown-content {
  display: block;
}

Bu kodla, açılır menü kapsayıcısının (düğme dahil) üzerine geldiğinizde, açılır menü içeriği görünecektir.

Görev

Kolay

Size, "Select Color" etiketli bir düğme ve üç seçenek (Red, Green, Blue) içeren HTML açılır menüsü verilmiştir.

Göreviniz, açılır menüyü CSS kullanarak şu şekilde biçimlendirmektir:

Seçenekler varsayılan olarak gizli olmalıdır.
Kullanıcı açılır menü kapsayıcısının üzerine geldiğinde seçenekler görünür hale gelmelidir.

Kendin dene

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