Cara Membuat Menu Navigasi Atas Dropdown

Pelajari cara membuat Menu bar navigasi atas dropdown menggunakan CSS.

Section Artikel

1 Menu Dropdown di Navbar
2 Buat Sebuah Navbar Dropdown
- 2.1 Langkah 1) Tambahkan HTML
3 Penjelasan Contoh
- 3.1 Langkah 2) Tambahkan CSS
4 Penjelasn Contoh
5 Dropdown yang Dapat Diklik di Navbar

Menu Dropdown di Navbar

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>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.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 {
  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 {
  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;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <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>Arahkan kursor ke link "Dropdown" untuk melihat menu drop-down.</p>

</body>
</html>

Buat Sebuah Navbar Dropdown

Buat menu dropdown yang muncul saat pengguna menggerakkan mouse ke atas elemen di dalam bar navigasi.

Langkah 1) Tambahkan HTML

Contoh:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </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 menggunakan CSS.

Langkah 2) Tambahkan CSS

Contoh:

/* Kontainer Navbar */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}

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

/* Kontainer dropdown */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Tombol Dropdown */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Penting untuk perataan vertikal pada ponsel */
  margin: 0; /* Penting untuk perataan vertikal pada ponsel */
}

/* Tambahkan warna background merah ke link navbar saat mengarahkan kursor */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* konten Dropdown (hidden secara default) */
.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;
}

/* Link di dalam dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Tambahkan warna background abu-abu ke link dropdown saat mengarahkan kursor */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Tampilkan menu dropdown saat mengarahkan kursor */
.dropdown:hover .dropdown-content {
  display: block;
}

Penjelasn Contoh

Kami telah memberi style pada bar navigasi dan link navbar dengan warna background, padding, dan lain-lain.

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

Kelas .dropdown adalah wadah untuk .dropdown-content. Karena ini adalah elemen <div>, dan bukan elemen <a>, kita harus mengapungkannya untuk memastikannya tetap di sebelah link.

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.

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.

Selektor :hover digunakan untuk menampilkan menu dropdown saat pengguna menggerakkan mouse ke atas tombol dropdown.

Dropdown yang Dapat Diklik di Navbar

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>

How To

Cara Membuat Menu Navigasi Atas Dropdown

Menu Dropdown di Navbar

Buat Sebuah Navbar Dropdown

Langkah 1) Tambahkan HTML

Penjelasan Contoh

Langkah 2) Tambahkan CSS

Penjelasn Contoh

Dropdown yang Dapat Diklik di Navbar

Cara Membuat Menu Dropdown Cascading

Cara Membuat Menu SideNav Dropdown

You may also like