Cara Membuat Sidenav dengan Animasi di W3.CSS
Ketika Tuhan mengambil sesuatu dari genggamanmu hakekatnya Tuhan tak menghukum-mu, Tuhan hanya ingin menggantikannya dengan yg lebih bagus. Masih seputaran dengan Framework Memiliki tampilan yang dinamis kita yaitu W3.CSS. Kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Membangun Sidenav dengan Animasi di W3.CSS.
Kalau di sebelumnya saya membahas kepada kalian mengenai bagaimana Cara Membangun Sidenav dengan W3.CSS. Nah kali ini pun masih dengan Sidenav teman-teman, tapi kita variasikan dengan menambahkan animasi ke pada nya. Oke seketika saja kita praktekkan ya, berikut Cara Membangun Sidenav dengan Animasi di W3.CSS.
Pertama-tama-tama siapkan file index.html nya.
Kemudian isi di bagian <head> link bagi 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 dapat 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? lumayan gampang bukan?
Sekianlah bagi panduan kali ini mengenai Cara Membangun Sidenav dengan Animasi di W3.CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
