Demo Dan Javascript Hidangan Navigasi Samping (Opacity)

Baca Juga

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

≡ menu

× About Services Clients Contact

---

Contoh Navigasi Animasi Slide Samping dengan opacity

Klik tombol sajian di atas untuk menjalankan sajian navigasi.

Jika Anda ingin konten terlihat buram /gelap (opacity) ketika sajian 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 arahan <div class='content-inner'>, lalu ganti dengan arahan berikut

<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