Cara Membuat Snackbar Pada Website

Review by : Sutiono S.Kom., M.Kom., M.T.I

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 >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 >

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);
}

Hanifah Nurbaeti

Tags: CSSHow To