Demo Dan Javascript (Menu Navigasi Samping Push Content Opacity)

≡ menu

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

Klik tombol sajian di atas untuk menjalankan sajian navigasi.

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

Tambahkan javascript, letakkan di atas instruksi </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 instruksi <div class='content-inner'>, lalu ganti dengan instruksi di bawah ini.

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

Catatan:

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

« Kembali