Cara Membuat Snackbar Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 20, 2021

Di bawah ini kita akan mempelajari cara membuat snackbar dengan CSS dan JavaScript.

Snackbar

Snackbar sering digunakan sebagai tooltips / popup untuk menampilkan pesan di bagian bawah layar.

Klik pada tombol di bawah ini untuk menampilkan snackbar. Kemudian akan hilang setelah 3 detik.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #D2691E;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
</style>
</head>
<body>

<h2>Snackbar</h2>
<p> Snackbar sering kali digunakan sebagai tooltips / popup untuk menampilkan pesan di bagian bawah layar. </p>
<p> Klik tombol untuk menampilkan snackbar. Ini akan hilang setelah 3 detik. </p>

<button onclick="myFunction()">Tampilkan Snackbar</button>

<div id="snackbar">Hai ini contoh text yang ditampilkan!</div>

<script>
function myFunction() {
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>

</body>
</html>

Buat Snackbar

Langkah 1) Tambahkan HTML:
Contoh

<!--Gunakan tombol untuk membuka snackbar-->
<button onclick="myFunction()">Tampilkan Snackbar</button>

<!-- Snackbar yang sebenarnya -->
<div id="snackbar">Hai ini contoh text yang ditampilkan!</div>

Langkah 2) Tambahkan CSS:
Style pada snackbar dan tambahkan animasi:
Contoh

/* Snackbar - posisikan di bagian bawah dan tengah layar */
#snackbar {
  visibility: hidden; /* Tersembunyi secara default. Terlihat saat diklik */
  min-width: 250px; /* Tetapkan lebar minimum default */
  margin-left: -125px; /*Bagilah nilai min-width dengan 2 */
  background-color: #333; /* hitam untuk warna background */
  color: #fff; /* warna text putih */
  text-align: center; /* Posisi teks di tengah */
  border-radius: 2px; /* border bulat */
  padding: 16px; /* Padding */
  position: fixed; /* Tetapkan posisi di atas layar */
  z-index: 1; /* Tambahkan indeks-z jika perlu */
  left: 50%; /* posisi tengah snackbar */
  bottom: 30px; /* 30px dari bawah */
}

/* Tampilkan snackbar saat mengklik tombol (kelas ditambahkan dengan JavaScript) */
#snackbar.show {
  visibility: visible; /* Tampilkan snackbar */
   /* Tambahkan animasi: Ambil 0,5 detik untuk memudarkan dan menghilangkan snackbar.
   Namun, tunda proses fade out selama 2,5 detik */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animasi untuk memudarkan snackbar in dan out*/
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

Langkah 3) Tambahkan JavaScript:
Gunakan JavaScript untuk menambahkan kelas “tampilkan” ke container snackbar dengan mengklik tombol:
Contoh

function myFunction() {
  // Dapatkan div
  var x = document.getElementById("snackbar");

  // Tambahkan "show" ke div
  x.className = "show";

  // setelah 3 detik, hapus kelas show dari DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}