CSS dapat digunakan untuk membuat dropdown.
Dropdown Dasar
Buat kotak dropdown yang muncul saat pengguna menggerakkan mouse ke suatu elemen.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h2>Dropdown yang Dapat Dilayangkan</h2>
<p>Arahkan mouse ke atas teks di bawah untuk membuka konten tarik-turun.</p>
<div class="dropdown">
<span>Arahkan mouse ke saya</span>
<div class="dropdown-content">
<p>Halo Dunia!</p>
</div>
</div>
</body></html>Penjelasan :
Gunakan elemen tertentu untuk membuka konten dropdown. Misalnya, selemen <span>, atau <button> .
Gunakan elemen pembungkus (seperti <div>) untuk membuat konten dropdown dan menambahkan konten di dalamnya.
Bungkus menggunakan elemen <div> di sekitar elemen untuk memposisikan konten dropdown dengan benar menggunakan CSS.
Class .dropdown menggunakan position:relative, yang diperlukan agar konten dropdown ditempatkan tepat di bawah tombol dropdown (menggunakan position:absolute).
Class .dropdown-content menyimpan konten dropdown sebenarnya. Konten ini tidak terlihat atau hidden secara default, dan akan ditampilkan saat melayang (tampil ke bawah). Perhatikan bahwa min-width diatur ke 160px. Jika ingin lebar konten dropdown selebar tombol dropdown, maka atur width ke 100% (dan overflow:auto untuk mengaktifkan scroll pada layar kecil).
Pada contoh menggunakan properti CSS box-shadow untuk membuat menu dropdown terlihat seperti “card“.
Selector :hover digunakan untuk menampilkan menu dropdown saat pengguna menggerakkan mouse ke atas tombol dropdown.
Dropdown Menu
Buat menu dropdown yang memungkinkan pengguna memilih opsi dari list:
Contoh ini mirip dengan contoh sebelumnya, pada contoh ini menambahkan link di dalam kotak dropdown dan memberi style agar sesuai dengan gaya tombol dropdown:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.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;
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;
}
</style>
</head>
<body>
<h2>Menu Tarik-turun</h2>
<p>Gerakkan mouse ke atas tombol untuk membuka menu tarik-turun.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Tautan 1</a>
<a href="#">Tautan 2</a>
<a href="#">Tautan 3</a>
</div>
</div>
<p><strong>Catatan:</strong> Kami menggunakan href="#" untuk tautan uji. Di situs web nyata ini akan menjadi URL.</p>
</body></html>Konten Dropdown Rata Kanan
Jika ingin menu dropdown bergerak dari kanan ke kiri, bukan dari kiri ke kanan, maka tambahkan right: 0;
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h2>Konten Dropdown Selaras</h2>
<p>Tentukan apakah konten tarik-turun harus bergerak dari kiri ke kanan atau kanan ke kiri dengan properti kiri dan kanan.</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">Kiri</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Tautan 1</a>
<a href="#">Tautan 2</a>
<a href="#">Tautan 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Benar</button>
<div class="dropdown-content">
<a href="#">Tautan 1</a>
<a href="#">Tautan 2</a>
<a href="#">Tautan 3</a>
</div>
</div>
</body></html>Contoh Lainnya
Dropdown Gambar
Cara menambahkan gambar dan konten lain di dalam kotak dropdown.
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<h2>Gambar Tarik-turun</h2>
<p>Gerakkan mouse ke atas gambar di bawah untuk membuka konten tarik-turun.</p>
<div class="dropdown">
<img src="img_5terre.jpeg" alt="Cinque Terre" width="100" height="50">
<div class="dropdown-content">
<img src="img_5terre.jpeg" alt="Cinque Terre" width="300" height="200">
<div class="desc">Cinque Terre yang indah</div>
</div>
</div>
</body></html>Dropdown Navbar
Cara menambahkan menu dropdown di dalam navbar.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
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;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#news">Berita</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Tautan 1</a>
<a href="#">Tautan 2</a>
<a href="#">Tautan 3</a>
</div>
</li>
</ul>
<h3>Menu Tarik-turun di dalam Bilah Navigasi</h3>
<p>Arahkan kursor ke tautan "Dropdown" untuk melihat menu dropdown.</p>
</body></html>Tutorial sebelumnya : Membuat Bar Navigasi Horizontal Dengan CSS
Tutorial setelahnya : Membuat Galeri Gambar Dengan CSS
Semua Tutorial CSS : Tutorial CSS