Tips Tutorial Demo Dan Javascript (Menu Navigasi Samping Push Content Opacity)

≡ menu

× About Services Clients Contact

tips tutorial cara mengetahui

---

tips tutorial cara mengetahui

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

tips tutorial cara mengetahui 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 arahan </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 arahan <div class='content-inner'>, lalu ganti dengan arahan di bawah ini.

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

Catatan:

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

« Kembali