Açılır menü

Coddy'nin HTML Journey'sinin Practical Frontend 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 butona ve üç seçeneğe (Red, Green, Blue) sahip bir açılır menü (dropdown menu) için HTML verilmiştir.

Göreviniz, açılır menüyü CSS ile şu şekilde stillendirmektir:

Seçenekler varsayılan olarak gizlidir.
Kullanıcı açılır menü kapsayıcısının üzerine geldiğinde (hover) seçenekler görünür hale gelir.

Kopya kağıdı

Bir açılır menü (dropdown menu), kullanıcı üzerine geldiğinde veya odaklandığında daha fazla bağlantı gösterir. Gizli menüyü ortaya çıkarmak için :hover veya :focus-within kullanın.

HTML yapısı:

<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 uygulaması:

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

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

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

Açılır menü kapsayıcısı, açılır içeriğin position: absolute ile konumlandırılabilmesi için position: relative kullanır. İçerik varsayılan olarak display: none ile gizlenir ve üzerine gelindiğinde display: block ile gösterilir.

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>