Cara Membuat Sidenav dengan W3.CSS

Terkadang “DIAM” adalah pilihan terbaik saat hati dan lidah lelah untuk berkata.
Kesempatan kali ini saya akan berbagi ilmu lagi nih kepada kalian teman-teman.
Ilmu yang akan saya bagikan kepada kalian ini tentang bagaimana Cara Membuat Sidenav dengan W3.CSS.

Apa itu Sidenav? Sidenav itu adalah Menu Bar yang posisi nya ada di samping dari badan website kita. Muncul nya juga banyak variasi, mulai dari collapse atau ada tombol untuk munculin menu nya atau juga yang menu nya memang sudah keliatan di samping badan website kita. Oke langsung saja, berikut Cara Membuat Sidenav dengan W3.CSS.

Seperti biasa, pertama-tama silahkan teman-teman siapkan file index.html nya.

Kemudian, isi di bagian <head> link untuk 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="Car" 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? cukup mudah bukan?

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

Semoga bermanfaat, terima kasih

Kategori