Demo dan Javascript (Menu Navigasi samping push content opacity)

≡ menu

× About Services Clients Contact

Bakul Oreg

---

Contoh Menu Navigasi Samping (side Navigation push content opacity) mendorong konten dengan animasi dan opacity / kegelapan.

Klik tombol menu di atas untuk menjalankan menu navigasi.

Pada menu navigasi model ini, selain mendorong konten, warna background konten juga diubah menjadi sedikit buram (seperti diselimuti kabut).

Tambahkan javascript, letakkan di atas kode </body>

<script>
function openNav() {
    document.getElementById("myNavix").style.width = "250px";
    document.getElementById("main-nav").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    document.getElementById("myNavix").style.width = "0";
    document.getElementById("main-nav").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}
</script>

Khusus pengguna template default Blogger, gunakan script di bawah ini.

<script>
function openNav() {
    document.getElementById("myNavix").style.width = "250px";
    document.getElementById("main-nav").style.marginLeft = "250px";
    document.getElementById("content-inner").style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
   document.getElementById("myNavix").style.width = "0";
    document.getElementById("main-nav").style.marginLeft = "0";
    document.getElementById("content-inner").style.backgroundColor = "white";
}
</script>

Hapus kode <div class='content-inner'>, kemudian ganti dengan kode di bawah ini.

<div class='content-inner' id='content-inner'>

Catatan:

• Ganti kode warna pada script ("white"), sesuai dengan warna asli dari background content-inner template Anda.
• Ganti kode marginLeft menjadi marginRight untuk menu navigasi slide / geser kanan.

« Kembali