Membuat Toggle Sidenav dengan Animasi

Membuat Toggle Sidenav dengan Animasi – Hallo semuanya, pada kesempatan kali ini saya akan membagikan satu fitur yang sangat umum dan cukup banyak yang ingin membuatnya. Penulisan artikel kali ini kita akan membahas tentang bagaimana cara membuat toggle sidenav dengan animasi. Cara kerjanya sangat sederhana, ketika tombol di klik, maka sidenav akan muncul dari sisi kiri halaman bergerak masuk kedalam sesuai lebar yang kita tantukan. Kurang lebih seperti ini penjelasan singkatnnya, selanjutnya kita akan langsung saja membuatnya

 

Struktur HTML

Pada kode berikut kita membuat elemen dengan id mySidenav yang akan kita gunakan untuk menjadikan pembungkus dari sidenav yang kita buat. Pada kode berikut juga sudah ditambahkan dua tombol yang memiliki event onclick sebagai fungsi untuk membuka dan menutup sidenav.

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About </a>
  <a href="#">Services </a>
  <a href="#">Clients </a>
  <a href="#">Contact </a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

Style CSS

Pada style css berikut akan menggunakan property position:fixed dan juga kita akan mengatur tombol close yang ada.

body {
  font-family: "Lato", sans-serif;
}

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

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.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;
}


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

 

Kode Javascript

Pada kode dibawah ini kita membuat dua buah fungsi javascript sederhana yaitu openNav() dan closeNav() dengan memanfaatkan id mySidenav sebagai selector,

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Baiklah teman-teman, demikian artikel kali ini yang membahas tentang bagaimana cara membuat sidenav dengan animasi. Kode diatas bebas kalian gunaka untuk dijadikan referensi atau menjadi bagian pada project kalian. Semoga bermanfaat

 

6 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat