Cara Membuat Sidenav dengan W3.CSS
Terkadang “DIAM” yakni alternatif terbaik dikala hati dan lidah lelah bagi berkata.
Kesempatan kali ini saya akan berbagi ilmu lagi nih kepada kalian teman-teman.
Ilmu yang akan saya share kepada kalian ini mengenai bagaimana Cara Merancang Sidenav dengan W3.CSS.
Apa itu Sidenav? Sidenav itu yakni Fitur Bar yang posisi nya ada di samping dari badan situs kita. Muncul nya pun banyak variasi, mulai dari collapse atau ada tombol bagi munculin fitur nya atau pun yang fitur nya memang telah keliatan di samping badan situs kita. Oke seketika saja, berikut Cara Merancang Sidenav dengan W3.CSS.
Seperti biasanya, pertama-tama silahkan teman-teman siapkan file index.html nya.
Kemudian, isi di bagian <head> link bagi menghubungkan HTML kita dengan library CSS nya W3.CSS.
<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-white w3-card-2 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 id=main>
<header class=w3-container w3-teal>
<span class=w3-opennav w3-xlarge onclick=w3_open() id=openNav>☰</span>
<h1>My Header</h1>
</header>
<img src=img_car.jpg alt= yakni alternatif terbaik dikala hati dan lidah lelah bagi berkata Cara Merancang Sidenav dengan W3.CSS style=width:100%>
<footer class=w3-container w3-teal>
<h5>Footer</h5>
</footer>
</div>
<script>
function w3_open() {
document.getElementById(main).style.marginLeft = 25%;
document.getElementById(mySidenav).style.width = 25%;
document.getElementById(mySidenav).style.display = block;
document.getElementById(openNav).style.display = 'none';
}
function w3_close() {
document.getElementById(main).style.marginLeft = 0%;
document.getElementById(mySidenav).style.display = none;
document.getElementById(openNav).style.display = inline-block;
}
</script>
</body>
Bagaimana teman-teman? lumayan gampang bukan?
Demikianlah bagi panduan kali ini mengenai Cara Merancang Sidenav dengan W3.CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
