How To

Cara Membuat “More” Botton

Di bawah ini kita akan mempelajari cara membuat tombol “More”. Tombol “More” ini biasanya menggunakan navbar dropdown.

Button “More” di Navbar

<!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">About</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 Navigation Bar </h3>
<p> Arahkan kursor ke atas tautan "Dropdown" untuk melihat menu Dropdown. </p>

</body>
</html>

Buat Sebuah Navbar Dropdown

Buat menu Dropdown yang muncul saat pengguna menggerakkan mouse ke atas elemen di dalam navigation bar.

Langkah 1) Tambahkan HTML:
Contoh

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">About</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <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 Kode

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

Gunakan elemen container (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 menggunakan CSS.

Langkah 2) Tambahkan CSS:
Contoh

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

/* Link yang di dalam bar navigasi */.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

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

/* Dropdown button */.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 (disembunyikan 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;
}

/* Tautan 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;
}

Penjelasan Kode

Kita sudah memberi gaya pada bar navigasi dan link navbar dengan warna latar belakang, padding, dll.

Kita juga sudah memberi style pada tombol dropdown dengan warna latar belakang, padding, dll.

Class .dropdown adalah container untuk .dropdown-content. Karena ini adalah elemen <div> dan bukan elemen<a>, jadi kita harus melakukan float untuk memastikan bahwa itu tetap di sebelah tautan/link.

Class .dropdown-content dapat menyimpan menu dropdown yang sebenarnya. Hal itu tersembunyi secara default dan akan ditampilkan saat melakukan float. Perhatikan min-width diatur ke 160px. Silakan ubah ini sesuai dengan selera.

Kita tidak akan menggunakan menggunakan border, kita akan menggunakan properti box-shadow untuk membuat menu dropdown agar terlihat seperti “kartu”. Kita juga akan 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.


Hanifah Nurbaeti

Share
Tags: buttonHow Tohtml dan css