Membuat Side Navigation Full Width Ketika Dibuka

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Wed Design. Pembahasan sebelumnya saya pernah membahas tentang membuat efek transparan pada body ketika sidenav dibuka danÂ konten akan bergeser ke arah kanan. Tidak jauh beda dengan pembahasan sebelumnya dan kali ini saya membahas tentang cara Membuat Side Navigation Full Width Ketika Dibuka.

Langkah pertama untuk membuat Membuat Side Navigation Full Width Ketika Dibuka adalah kita buat terlebih dahulu struktur htmlnya seperti pada script di bawah ini.

<!DOCTYPE html>
<html>
<head>
  <title> Membuat Side Navigation Full Width Ketika 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 Side Navigation Full Width Ketika Dibuka </h2>
    <p>Klik ikon di bawah untuk membuka menu side navigation maka side navigation akan muncul dengan lebar yang full sehingga menutupi kontentnya.</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;
    text-align:center;
}

  .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 side navigation dengan lebar yang full. Berikut scriptnya ya teman-teman.

<script>
  /* Open the sidenav */
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}  
</script>

Teman-teman bisa perhatikan script di atas. Dimana ketika side navigation dibuka maka menu side navigation akan muncul dengan lebar full dan pada konten yang ada di dalam id main akan ditutupi oleh side navigationnya. Dan tampilannya akan seperti pada gambar di bawah ini ya teman-teman.

Tampilan sebelum sidenav dibuka.

Tampilan setelah sidenav dibuka.

Demikian artikel tentang Membuat Side Navigation Full Width Ketika Dibuka. Semoga bermanfaat dan selamat mencoba ya teman-teman.

Membuat Side Navigation Full Width Ketika Dibuka

Kategori