Cara Mudah Membuat Dropdown Smooth dengan jQuery ( Tailwind CSS )

Daftar Isi

  • Pengenalan Dropdown Menu Interaktif
    • Apa Itu Dropdown Menu?
    • Kenapa Menggunakan Animasi Smooth?
    • Keuntungan Dropdown Default Terbuka Sejak Awal
  • Membangun Struktur HTML
    • Keseluruhan
    • Head
    • Body
  • Membangun Struktur JavaScript (JQuery)
  • Penutup

Pengenalan Dropdown Menu Interaktif

Apa Itu Dropdown Menu?

Dropdown menu (sering juga disebut select menu atau pulldown menu) adalah komponen navigasi/interaksi yang menyembunyikan daftar opsi di balik sebuah kontrol tunggal (misalnya tombol atau bidang teks), dan menampilkannya saat pengguna mengaktifkan kontrol tersebut.

  • Karakteristik utama:
    1. Terselubung (collapsed): Pada kondisi normal, hanya judul atau label menu yang terlihat.
    2. Melebar (expanded): Saat diaktifkan, daftar opsi muncul bisa berupa teks, ikon, atau elemen kompleks lainnya.
    3. Interaksi: Biasanya menggunakan klik, tap, atau hover. Setelah pengguna memilih salah satu item, menu otomatis menutup kembali (kecuali diatur lain).
  • Kegunaan umum:
    • Memilih opsi pada form (misalnya memilih negara, jenis kelamin, dsb.)
    • Navigasi situs (menu utama dengan sub-menu)
    • Menyembunyikan opsi-opsi lanjutan agar tampilan lebih ringkas

Lalu ada dropdown menu otomatis terbuka yang saat ini sedang kita pelajari, adalah varian di mana daftar opsi muncul tanpa perlu klik/tap, melainkan dipicu oleh Saat Halaman Dimuat (on-load), yaitu :

  1. Dropdown langsung terbuka begitu halaman selesai dimuat (page load).
  2. Umumnya digunakan untuk menekankan pilihan awal atau menampilkan pengumuman.

Kenapa Menggunakan Animasi Smooth?

  1. Mengurangi Kejutan Visual
  2. Memberi Indikasi Status
  3. Dengan transisi, konten dropdown perlahan muncul → mata pengguna lebih siap membaca dan menyerap informasi.
  4. Gerakan dari atas ke bawah, atau fade-in, memberi sinyal visual tentang asal-usul dan tujuan menu itu sendiri.
  5. Website atau aplikasi dengan transisi halus terlihat lebih modern, meyakinkan, dan berkualitas tinggi.

Keuntungan Dropdown Default Terbuka Sejak Awal

Pengguna langsung melihat semua opsi tanpa harus klik dulu.

Tidak perlu klik untuk membuka → cocok untuk akses cepat.

Berguna di perangkat mobile atau untuk pengguna dengan keterbatasan motorik.

Pilihan dropdown default terbuka bisa mempercepat pengisian data.

Membangun Struktur HTML

Keseluruhan

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dropdown Menu Jquery</title>
  </head>
  <body>
    <!-- abaikan ini dulu -->
  </body>
</html>
  • <!DOCTYPE html> (Deklarasi doctype)

Menyatakan bahwa dokumen ini menggunakan HTML5.

  • <html lang="en"> (Tag pembuka <html> dengan atribut lang="en")

Awal dari dokumen HTML; lang="en" menyatakan bahasa Inggris.

  • <head> (Tag pembuka <head>)

Bagian metadata, tidak ditampilkan di halaman secara langsung.

  • <meta charset="UTF-8" /> (Meta charset)

Mengatur encoding karakter ke UTF-8, mendukung banyak bahasa/simbol.

  • <meta name="viewport" content="width=device-width, initial-scale=1.0" /> (Meta viewport)

Membuat tampilan responsif di perangkat mobile/tablet.

  • <title>Dropdown Menu Jquery</title> (Tag <title>)

Judul halaman yang muncul di tab browser atau hasil pencarian.

  • </head> (Tag penutup <head>)

Mengakhiri bagian metadata.

  • <body> (Tag pembuka <body>)

Bagian utama tempat elemen konten ditampilkan di browser.

  • <!-- abaikan ini dulu --> (Komentar HTML)

Catatan pengembang; tidak akan terlihat di tampilan browser.

  • </body> (Tag penutup <body>)

Mengakhiri bagian konten utama halaman.

  • </html> (Tag penutup <html>)

Menandakan akhir dokumen HTML.

Head

<!-- index.html -->

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap>" rel="stylesheet" />
    <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script>
    <title>Dropdown Menu Jquery</title>
    <style>
      body {
        font-family: "Poppins", sans-serif;
      }
    </style>
  </head>
  • <link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap>" rel="stylesheet" /> (Tag <link> untuk font)

Mengimpor font Poppins dari Google Fonts dengan varian ketebalan 400, 500, 600, dan 700. Digunakan untuk mempercantik tampilan teks pada halaman. rel="stylesheet" menandakan bahwa ini adalah file CSS eksternal.

  • <script src="<https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4>"></script> (Tag <script> untuk Tailwind via CDN)

Mengimpor versi browser dari Tailwind CSS langsung dari CDN jsDelivr. Script ini memungkinkan penggunaan Tailwind CSS tanpa perlu proses build, cocok untuk proyek kecil atau prototipe.

  • Tag <style> Menambahkan CSS langsung di dalam HTML. Dalam contoh ini, font pada elemen <body> diatur agar menggunakan Poppins (dengan fallback sans-serif jika font gagal dimuat).

Body

<!-- index.html -->

<main class="relative mx-auto px-5 pt-[100px] min-h-screen w-full max-w-[640px] bg-[#F4F5F7]">
      <section id="BookingDetails" class="flex flex-col gap-4 rounded-3xl border border-[#E4E5E9] bg-white px-[14px] py-[14px]">
        <div class="flex items-center justify-between">
          <h2 class="font-semibold">Booking Details</h2>
          <!-- fokus pada sini -->
          <button type="button" data-expand="BookingDetailsJ" class="cursor-pointer">
            <img src="assets/arrow.svg" alt="icon" class="h-[32px] w-[32px] shrink-0 transition-all duration-300" />
          </button>
          <!-- sampai sini -->
        </div>
        <!-- fokus pada sini -->
        <div class="flex flex-col gap-4" id="BookingDetailsJ">
        <!-- sampai sini -->
          <div class="flex justify-between">
            <div class="flex items-center gap-[10px]">
              <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" />
              <p class="text-[#43484C]">Sub Total</p>
            </div>
            <strong class="font-semibold">Rp 180.394.392</strong>
          </div>
          <hr class="border-[#E4E5E9]" />
          <div class="flex justify-between">
            <div class="flex items-center gap-[10px]">
              <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" />
              <p class="text-[#43484C]">Tax 11%</p>
            </div>
            <strong class="font-semibold">Rp 18.495.699</strong>
          </div>
          <hr class="border-[#E4E5E9]" />
          <div class="flex justify-between">
            <div class="flex items-center gap-[10px]">
              <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" />
              <p class="text-[#43484C]">Insurance</p>
            </div>
            <strong class="font-semibold">Free for All</strong>
          </div>
          <hr class="border-[#E4E5E9]" />
          <div class="flex justify-between">
            <div class="flex items-center gap-[10px]">
              <img src="assets/note.svg" alt="icon" class="h-[24px] w-[24px] shrink-0" />
              <p class="text-[#43484C]">Service Tools</p>
            </div>
            <strong class="font-semibold">Free for All</strong>
          </div>
        </div>
      </section>
    </main>
    <!-- fokus pada sini -->
    <script src="<https://code.jquery.com/jquery-3.7.1.min.js>" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="jquery.js"></script>
     <!-- sampai sini -->
  • Script pertama : <script src="<https://code.jquery.com/jquery-3.7.1.min.js>" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> memuat pustaka jQuery dari CDN, agar $ dan semua fungsi jQuery tersedia.
  • Kedua memuat file jquery.js, yang berisi kode pada bab dibawah ini :

Membangun Struktur JavaScript ( JQuery )

// jquery.js

$(() => {
    $("[data-expand]").on("click", function (e) {
        $(this).children("img").toggleClass("-rotate-180");
        let target = $(`#${$(this).data("expand")}`);
        target.slideToggle();
    });
});
  • Kode JS ini mencari semua elemen yang memiliki atribut data-expand (dalam kasus kita hanya <button … data-expand="BookingDetailsJ">). Lalu dipasang event handler untuk klik.
  • Di dalam handler, $(this) merujuk ke tombol yang diklik. Pemanggilan .data("expand") akan mengambil string "BookingDetailsJ", yaitu nilai dari atribut data-expand.
  • Karakter back-tick (```) dan ${key} membentuk selektor jQuery "#BookingDetailsJ". jQuery kemudian mencari elemen dengan id="BookingDetailsJ" yaitu <div … id="BookingDetailsJ">.
  • .toggleClass("-rotate-180") menambahkan/menukar kelas Tailwind yang memutar ikon 180° setiap klik.
  • .slideToggle() menjalankan animasi “slide down/up” pada elemen target, sehingga bagian detail (#BookingDetailsJ) muncul atau hilang.

Dengan cara ini, tombol <button data-expand="BookingDetailsJ"> “mengomunikasikan” ke mana ia harus mencari konten tersembunyi lewat nilai data-expand, dan jQuery menggunakan nilai itu untuk menemukan <div id="BookingDetailsJ"> agar bisa di-slideToggle(). Sederhana tapi sangat fleksibel—cukup ubah data-expand dan id untuk membuat dropdown lain tanpa mengubah kode JavaScript-nya.

Penutup

Dengan mekanisme data-expand dan id yang saling terhubung ini, kalian dapat membuat dropdown interaktif yang mudah dikembangkan dan dipelihara cukup dengan menyesuaikan nilai pada atribut HTML tanpa perlu mengubah logika JavaScript-nya.

Apabila kalian ingin mengasah keterampilan slicing kalian maka jangan ragu belajar di website BuildWithAngga.

Terima Kasih!