Cara Membuat Sidenav dengan Animasi di W3.CSS

Ketika Tuhan mengambil sesuatu dari genggamanmu sebenarnya Tuhan tidak menghukum-mu, Tuhan hanya ingin menggantikannya dengan yg lebih baik. Masih seputaran dengan Framework Responsive kita yaitu W3.CSS. Kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Sidenav dengan Animasi di W3.CSS.

Jika pada sebelumnya saya membahas kepada kalian tentang bagaimana Cara Membuat Sidenav dengan W3.CSS. Nah kali ini juga masih dengan Sidenav teman-teman, tapi kita variasikan dengan menambahkan animasi ke dalam nya. Oke langsung saja kita praktekkan ya, berikut Cara Membuat Sidenav dengan Animasi di W3.CSS.

Pertama-tama siapkan file index.html nya.

Kemudian isi di bagian <head> link untuk menghubungkan HTML kita dengan library CSS dari W3.CSS nya.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah.

<body>

<nav class="w3-sidenav w3-dark-grey w3-animate-left" style="display:none" id="mySidenav">
  <a href="javascript:void(0)" onclick="w3_close()"
  class="w3-closenav w3-large">Close &times;</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</nav>

<div class="w3-container">
  <span class="w3-opennav w3-xlarge" onclick="w3_open()">☰</span>
  <h2>Animated Sidenav Example</h2>
  <p>Animasi bisa diubah dengan nama-nama class berikut: w3-animate-left, w3-animate-top, w3-animate-bottom, w3-animate-right, w3-animate-opacity, w3-animate-zoom</p>
</div>
     
<script>
function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
</script>
     
</body>

Bagaimana teman-teman? cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Sidenav dengan Animasi di W3.CSS.

Semoga bermanfaat, terima kasih

Cara Membuat Sidenav dengan Animasi di W3.CSS

Kategori