Cara membuat dropdown di html tanpa css

Pelajari cara membuat menu dropdown yang dapat diklik dengan CSS dan JavaScript.

Table of Contents Show

Buat Dropdown yang Dapat Diklik
Dropdown rata kanan
Menu Dropdown di Navbar
Cari (Filter) Dropdown

Section Artikel

1 Dropdown
2 Buat Dropdown yang Dapat Diklik
- 2.1 Langkah 1) Tambahkan HTML
- 2.2 Langkah 2) Tambahkan CSS
- 2.3 Penjelasan Contoh
- 2.4 Langkah 3) Tambahkan JavaScript
3 Dropdown rata kanan
4 Menu Dropdown di Navbar
5 Cari (Filter) Dropdown

Dropdown

Menu dropdown adalah menu yang dapat dialihkan yang memungkinkan pengguna memilih satu nilai dari daftar yang telah ditentukan sebelumnya:

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  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 a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<h2>Menu Dropdown yang dapat di Klik</h2>
<p>Klik pada tombol untuk membuka menu dropdown.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>
/* Saat pengguna mengklik tombol,
toggle antara menyembunyikan dan menampilkan konten dropdown */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

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

</body>
</html>

Buat menu dropdown yang muncul saat pengguna mengklik tombol.

Langkah 1) Tambahkan HTML

Contoh:

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

Penjelasan Contoh

Gunakan elemen apa pun untuk membuka menu dropdown, misalnya button, elemen <a> atau <p>.

Gunakan elemen kontainer (seperti <div>) untuk membuat menu dropdown dan menambahkan link dropdown di dalamnya.

Bungkus elemen <div> di sekitar tombol dan <div> untuk memposisikan menu dropdown dengan benar dengan CSS.

Langkah 2) Tambahkan CSS

Contoh:

/* Tombol Dropdown */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Tombol Dropdown pada hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* Kontainer <div> - diperlukan untuk memposisikan konten dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Konten Dropdown (Hidden secara Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

/* Ubah warna link dropdown on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Tampilkan menu dropdown (gunakan JS untuk menambahkan kelas ini ke .dropdown-content container ketika pengguna mengklik tombol dropdown) */
.show {display:block;}

Penjelasan Contoh

Kami telah memberi style pada tombol dropdown dengan warna background, padding, efek hover, dan lain-lain.

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

Kelas .dropdown-content menyimpan menu dropdown yang sebenarnya. Itu tersembunyi secara default, dan akan ditampilkan saat hover (lihat di bawah). Perhatikan min-width diatur ke 160px. Silakan ubah ini. Tips: Jika Anda ingin lebar konten dropdown menjadi selebar tombol dropdown, setel lebar ke 100% (dan atur overflow: auto untuk mengaktifkan scroll di layar kecil).

Alih-alih menggunakan border, kami telah menggunakan properti box-shadow untuk membuat menu dropdown terlihat seperti “kartu”. Kami juga menggunakan z-index untuk menempatkan dropdown di depan elemen lainnya.

Langkah 3) Tambahkan JavaScript

Contoh:

/* Saat pengguna mengklik tombol,
toggle antara menyembunyikan dan menampilkan konten dropdown */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

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

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

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

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

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

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

.show {display: block;}
</style>
</head>
<body>

<h2>Konten Dropdown Sejajar</h2>
<p>Gunakan <strong>float: right</strong> di kelas dropdown untuk memunculkan menu dropdown ke kanan, dan <strong>right:0</strong> pada dropdown-content jika Anda ingin konten dropdown berpindah dari kanan ke kiri.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<script>

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

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

</body>
</html>

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

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

.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 {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

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

.show {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
  <button class="dropbtn" onclick="myFunction()">Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content" id="myDropdown">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </div> 
</div>

<h3>Menu Dropdown di dalam Bar Navigasi</h3>
<p>Klik pada link "Dropdown" untuk melihat menu dropdown.</p>

<script>

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

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
</script>
</body>
</html>

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

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

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {outline: 3px solid #ddd;}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

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

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

.show {display: block;}
</style>
</head>
<body>

<h2>Cari/Filter Dropdown</h2>
<p>Klik pada tombol untuk membuka menu dropdown, dan gunakan kolom input untuk mencari link dropdown tertentu.</p>

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

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

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

</body>
</html>