Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Wed Design. Kali ini saya akan membahas tentang cara Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka. Sidenav menu adalah menu navigasi yang berada di samping (sisi kiri atau sisi kanan). Dan kali ini saya akan membuat ketika sidenav dibuka maka content akan bergeser ke arah kanan dan tampilan body menjadi transparan.

Langkah pertama untuk membuat Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka adalah kita buat terlebih dahulu struktur htmlnya seperti pada script di bawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">Home</a>
    <a href="#">Profil</a>
    <a href="#">About</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
  </div>

  <div id="main">
    <h2>Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka</h2>
    <p>Klik ikon di bawah untuk membuka menu side navigation dan akan mendorong kontent ke kanan serta menjadikan background transparan pada body ketika side navigation dibuka</p>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">â˜° open</span>
  </div>     
</body>
</html>

Jika sudah selesai, teman-teman buat style cssnya seperti pada script di bawah ini.

<style>
  body {
      font-family: "Lato", sans-serif;
      transition: background-color .5s;
  }

  .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: salmon;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
  }

  .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
  }

  .sidenav a:hover {
      color: #f1f1f1;
  }

  .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
  }

  #main {
      transition: margin-left .5s;
      padding: 16px;
  }

  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
</style>

Oke selanjutnya kita buat javascript untuk menampilkan sidenav dan membuat opacity atau efek transparan pada body saat sidenav dibuka. Berikut scriptnya ya teman-teman.

<script>
  function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
      document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }

  function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
      document.body.style.backgroundColor = "white";
  }
</script>

Teman-teman bisa perhatikan script di atas. Dimana ketika sidenav dibuka maka sidenav akan muncul dengan lebar 250px dan pada konten yang ada di dalam id main akan diberikan margin kiri sebesar 250px sehingga kontennya seakan bergeser kesebelah kanan dan tidak ditutupi oleh sidenavnya. Dan terakhir background warna pada body diberikan dengan format rgba hitam dengan tingkat transparan 0,4. Dan tampilannya akan seperti pada gambar di bawah ini ya teman-teman.

Tampilan sebelum sidenav dibuka.

Tampilan setelah sidenav dibuka.

Demikian artikel tentang Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka. Semoga bermanfaat dan selamat mencoba ya teman-teman.

Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka

Kategori