CSS - Dropdowns: A Beginner's Guide

Halo sana, bakat web designer masa depan! Hari ini, kita akan melihat dunia yang menarik dari dropdown CSS. Seperti guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik turun. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

CSS - Dropdowns

Apa Itu CSS Dropdown?

Sebelum kita melompat ke kode, mari kita pahami apa itu dropdown. Bayangkan Anda di restoran mewah, dan pelayan memberikan Anda menu. Tetapi ini bukanlah menu biasa - ini adalah menu ajaib! Ketika Anda tap "Appetizers," daftar makanan lezat muncul. Itu sebenarnya apa yang dilakukan dropdown di website. Itu adalah menu yang, ketika diinteraksi, menampilkan lebih banyak pilihan.

Sekarang, mari kita lihat bagaimana kita bisa membuat magis ini dengan CSS!

CSS Dropdown - Contoh Dasar

Mari kita mulai dengan menu dropdown sederhana. Ini 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: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

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

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

mari kitauraikan ini:

Kita membuat wadah (<div class="dropdown">) untuk dropdown keseluruhan.
Dalamnya, kita punya tombol (<button class="dropbtn">) yang akan memicu dropdown.
Konten dropdown sebenarnya berada di div lain (<div class="dropdown-content">).
Kita gunakan CSS untuk menyembunyikan konten dropdown secara default (display: none;).
Ketika kita melayang di atas wadah dropdown, kita menampilkan konten (display: block;).

CSS Dropdown - Efect Melayang

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

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

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

CSS ini akan mengubah warna tombol saat Anda melayang di atasnya. Itu seperti tombol mengatakan, "Hey, saya siap untuk menunjukkan Anda lebih banyak opsi!"

CSS Dropdown - Dropdown Diklik

kadang-kadang, kita ingin dropdown muncul saat diklik, bukan hanya saat melayang. Ini adalah 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 menyalakan dan mematikan kelas 'show' saat tombol diklik, dan menutup dropdown jika Anda mengklik di mana saja di halaman.

CSS Dropdown - Menu Terkanan Kanan

Apa bila kita ingin dropdown kita berjejer ke kanan bukan ke kiri? Sangat mudah!

.dropdown-content {
right: 0;
}

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

CSS Dropdown - Menu Berjejer Kiri

Untuk keutuhan, ini adalah cara untuk secara eksplisit menjerrerkan menu Anda ke kiri (walaupun ini biasanya default):

.dropdown-content {
left: 0;
}

CSS Dropdown - Dengan Gambar

Mari kita membuat dropdown kita 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 atas. Itu seperti menambahkan buah keras di atas es krim CSS Anda!

CSS Dropdown - Dengan Navbar

Akhirnya, mari kita lihat bagaimana kita bisa menyusun dropdown kita ke dalam batang navigasi:

<ul class="navbar">
<li><a href="#">Home</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: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

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

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

Dan itu adalah! Sebuah batang navigasi dengan menu dropdown yang sepenuhnya berfungsi.

Kesimpulan

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

Berikut adalah tabel rujukan cepat metode yang kita pelajari:

Metode	Deskripsi
Dropdown Dasar	Dropdown sederhana yang muncul saat melayang
Efect Melayang	Dropdown dengan perubahan warna saat melayang
Dropdown Diklik	Dropdown yang muncul saat diklik
Menu Terkanan Kanan	Dropdown yang berjejer ke kanan
Menu Berjejer Kiri	Dropdown yang berjejer ke kiri (default)
Dengan Gambar	Dropdown yang termasuk gambar
Dengan Navbar	Dropdown yang disusun ke dalam batang navigasi

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

Credits: Image by storyset