Demo dan Javascript Menu Navigasi samping (opacity)

Cara kerja menu navigasi slide samping (opacity) yaitu mengubah ukuran navigasi dari 0 menjadi 250px sekaligus mengubah warna background konten menjadi agak gelap.

≡ menu

× About Services Clients Contact

Bakul Oreg

---

Contoh Navigasi Animasi Slide Samping dengan opacity

Klik tombol menu di atas untuk menjalankan menu navigasi.

Jika Anda ingin konten terlihat buram /gelap (opacity) saat menu navigasi dibuka. Gunakan salah satu script di bawah ini.

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

function closeNav() {
    document.getElementById("myNavix").style.width = "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("content-inner").style.backgroundColor = "rgba(0,0,0,0.4)";
}

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

Hapus kode <div class='content-inner'>, kemudian ganti dengan kode berikut

<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