Menu dropdown

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 20 dari 35.

Menu dropdown adalah item navigasi yang menampilkan lebih banyak tautan saat pengguna mengarahkan kursor ke item tersebut atau memfokuskannya. Dropdown dapat dibuat menggunakan JavaScript, tetapi dalam bab ini kita berfokus pada pendekatan CSS saja, yang menggunakan :hover atau :focus-within untuk menampilkan menu tersembunyi.

Mengapa menggunakannya:

Menghemat ruang di bilah navigasi.
Menjaga antarmuka tetap rapi dan teratur.
Cocok untuk desain yang mengutamakan perangkat seluler dan desain responsif jika disesuaikan dengan tepat.

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;
}

Dengan kode ini, saat kamu mengarahkan kursor ke wadah dropdown, termasuk tombolnya, konten dropdown akan muncul.

Tantangan

Mudah

Kamu diberi HTML untuk menu dropdown dengan tombol berlabel "Select Color" dan tiga opsi: Red, Green, Blue.

Tugasmu adalah mengatur gaya dropdown dengan CSS agar:

Opsi tersembunyi secara default.
Opsi menjadi terlihat saat pengguna mengarahkan kursor ke container dropdown.

Coba sendiri

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