Panduan Awal untuk Dropdown CSS

Halo sana, para desainer web masa depan! Hari ini, kita akan melompat ke dunia yang menakjubkan dropdown CSS. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya – kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda suka), dan mari kita mulai!

Apa Itu Dropdown CSS?

Sebelum kita masuk ke kode, mari kita pahami apa itu dropdown. Bayangkan Anda berada di restoran mewah, dan pelayan memberikan Anda sebuah menu. Tetapi ini bukanlah menu biasa – ini adalah menu ajaib! Ketika Anda sentuh "Appetizer," daftar makanan lezat muncul. Itu sebenarnya apa yang dilakukan dropdown di website. Itu adalah menu yang, saat diinteraksi, menampilkan lebih banyak opsi.

Sekarang, mari kita lihat bagaimana kita bisa menciptakan keajaiban ini dengan CSS!

Dropdown CSS - Contoh Dasar

Mari kita mulai dengan menu dropdown sederhana. Berikut adalah kode HTML dan CSS:

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

.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: hitam;
padding: 12px 16px;
text-decoration: none;
display: block;
}

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

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

mari kitauraikan ini:

1. Kita membuat wadah (<div class="dropdown">) untuk dropdown keseluruhan.
2. Dalamnya, kita punya tombol (<button class="dropbtn">) yang akan memicu dropdown.
3. Isi dropdown sebenarnya berada di div lain (<div class="dropdown-content">).
4. Kita gunakan CSS untuk menyembunyikan isi dropdown secara default (display: none;).
5. Ketika kita mengarahkan mouse ke wadah dropdown, kita menampilkan konten (display: block;).

Dropdown CSS - Efek Hover

Sekarang kita punya dropdown dasar, mari kita buatnya sedikit lebih menarik dengan efek hover:

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

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

CSS ini akan mengubah warna tombol saat Anda mengarahkan mouse kepadanya. Itu seperti tombol mengatakan, "Hey, saya siap untuk menunjukkan Anda lebih banyak opsi!"

Dropdown CSS - Dropdown saat Diklik

kadang-kadang, kita ingin dropdown muncul saat diklik, bukan hanya saat diarahkan mouse. Berikut cara kita bisa melakukannya dengan sedikit JavaScript:

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Tautan 1</a>
<a href="#">Tautan 2</a>
<a href="#">Tautan 3</a>
</div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.show {display:block;}

Skrip ini menombak kelas 'show' on dan off saat tombol diklik, dan menutup dropdown jika Anda mengklik di mana-mana di halaman.

Dropdown CSS - Menu Terkanan Kanan

Apa bila kita ingin dropdown beralign ke kanan bukannya ke kiri? Sangat mudah!

.dropdown-content {
right: 0;
}

Hanya tambahkan ini ke CSS Anda. Itu seperti mengatakan ke dropdown, "Pindah ke kanan, silakan!"

Dropdown CSS - Menu Terkanan Kiri

Untuk kekompleksan, ini cara Anda secara eksplisit mengalign menu ke kiri (meskipun ini biasanya default):

.dropdown-content {
left: 0;
}

Dropdown CSS - Dengan Gambar

Mari kita membuat dropdown lebih menarik dengan menambahkan gambar:

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">Tautan 1</a>
<a href="#">Tautan 2</a>
</div>
</div>

.dropdown-content img {
margin: 10px 0;
}

Sekarang dropdown Anda memiliki gambar cantik di bagian atas. Itu seperti menambahkan kerucut di atas es krim CSS Anda!

Dropdown CSS - Dengan Navbar

Akhirnya, mari kita lihat bagaimana kita bisa menyisipkan dropdown ke dalam navbar:

<ul class="navbar">
<li><a href="#">Beranda</a></li>
<li><a href="#">Berita</a></li>
<li class="dropdown">
<a href="#" 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>

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: putih;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: merah;
}

.navbar .dropdown {
display: inline-block;
}

Dan itu saja! Anda memiliki navbar yang sepenuhnya berfungsi dengan menu dropdown.

Kesimpulan

Selamat! Anda baru saja belajar membuat berbagai jenis dropdown CSS. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba contoh ini. Ubah warna, tambahkan animasi, atau bahkan cobalah menggabungkan jenis dropdown berbeda di satu halaman.

Berikut adalah tabel rujukan cepat dari metode yang kita pelajari:

Metode	Deskripsi
Dropdown Dasar	Dropdown sederhana yang muncul saat diarahkan mouse
Efek Hover	Dropdown dengan perubahan warna saat diarahkan mouse
Dropdown saat Diklik	Dropdown yang muncul saat diklik
Menu Terkanan Kanan	Dropdown yang beralign ke kanan
Menu Terkanan Kiri	Dropdown yang beralign ke kiri (default)
Dengan Gambar	Dropdown yang termasuk gambar
Dengan Navbar	Dropdown yang disisipkan ke dalam navbar

Ingat, di dunia desain web, kreativitas adalah teman terbaik Anda. Jadi, maju dan buat dropdown yang menakjubkan! Siapa tahu, mungkin Anda akan menciptakan hal baru besar dalam navigasi web. Selamat coding!

Credits: Image by storyset