Belajar CSS Part 27 - Dropdown Menu

CSS dropdown

Dropdown adalah elemen kontrol grafis pada halaman web yang mirip dengan kotak list yang memungkinkan pengguna untuk memilih salah satu nilai dari list tersebut.

Dropdown dasar

Di bawah ini merupakan contoh dari kotak dropdown yang muncul saat pengguna menggerakkan mouse di atas elemen tersebut.

Contoh

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Gerakkan mouse ke teks di bawah ini untuk membuka konten dropdown.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

untuk kode HTML

Gunakan setiap elemen untuk membuka konten dropdown, misalnya elemen <span> atau <button>.

Gunakan elemen container (seperti <div>) untuk menciptakan konten dropdown dan menambahkan apapun yang kita inginkan di dalamnya.

Bungkus elemen <div> di sekitar elemen untuk menempatkan konten dropdown dengan benar dengan CSS.

untuk kode CSS

Class .dropdown menggunakan position:relative, yang diperlukan ketika kita ingin konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position:absolute).

Class .dropdown-content berisi konten dropdown yang sebenarnya. Ini disembunyikan secara default, dan akan ditampilkan di hover (lihat di bawah). Perhatikan bahwa lebar minimum ditetapkan menjadi 160 piksel. Jangan ragu untuk mengubahnya.

Tips: Jika kita ingin lebar konten dropdown selebar tombol dropdown, atur lebar menjadi 100% (dan overflow:auto untuk mengaktifkan scroll pada layar kecil).

Selector :hover digunakan untuk menampilkan menu dropdown ketika pengguna menggerakkan mouse ke tombol dropdown.

Menu dropdown

Membuat menu dropdown yang memungkinkan pengguna untuk memilih opsi dari tiap list.

Contoh di bawah ini mirip dengan yang sebelumnya, kecuali bahwa kita menambahkan link di dalam kotak dropdown dan menatanya agar cocok dengan tombol dropdown yang telah ditata.

Contoh

.dropbtn {
    background-color: #007399;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #00ace6}

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

.dropdown:hover .dropbtn {
    background-color: #00ace6;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Dropdown Menu</h2>
<p>Gerakkan mouse ke teks di bawah ini untuk membuka konten dropdown.
</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<p><strong>Catatan:</strong> Kita menggunakan href="#" untuk mengetes link.</p>

</body>
</html>

Hasilnya:

Right-aligned Dropdown Content

Right-aligned Dropdown Content adalah penyelarasan menu dropdown ke kanan.

Jika kita ingin menu dropdown berawal dari kanan ke kiri, bukan dari kiri ke kanan, tambahkan right: 0;

Contoh

.dropbtn 
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Aligned Dropdown Content</h2>
<p>Tentukan apakah konten dropdown harus berawal dari kiri ke kanan atau kanan ke kiri dengan menggunakan properti left dan right.</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">Right</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Hasilnya:

Dropdown Gambar

Dibawah ini adalah cara menambahkan gambar dan konten lainnya dalam kotak dropdown.

Contoh

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

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

.desc {
    padding: 15px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Dropdown Image</h2>
<p>Gerakkan mouse ke teks di bawah ini untuk membuka konten dropdown.</p>

<div class="dropdown">
  <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="100" height="50">
  <div class="dropdown-content">
    <img src="nama_gambar.jpg" alt="nama_alternatif_gambar" width="300" height="200">
    <div class="desc">Deskripsi Gambar</div>
  </div>
</div>

</body>
</html>

Hasilnya: