Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Wed Design. Kali ini saya akan membahas tentang cara Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka. Sidenav menu adalah menu navigasi yang berada di samping (sisi kiri atau sisi kanan). Dan kali ini saya akan membuat ketika sidenav dibuka maka content akan bergeser ke arah kanan dan tampilan body menjadi transparan.

Langkah pertama untuk membuat Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka adalah kita buat terlebih dahulu struktur htmlnya seperti pada script di bawah ini.

Jika sudah selesai, teman-teman buat style cssnya seperti pada script di bawah ini.

Oke selanjutnya kita buat javascript untuk menampilkan sidenav dan membuat opacity atau efek transparan pada body saat sidenav dibuka. Berikut scriptnya ya teman-teman.

Teman-teman bisa perhatikan script di atas. Dimana ketika sidenav dibuka maka sidenav akan muncul dengan lebar 250px dan pada konten yang ada di dalam id main akan diberikan margin kiri sebesar 250px sehingga kontennya seakan bergeser kesebelah kanan dan tidak ditutupi oleh sidenavnya. Dan terakhir background warna pada body diberikan dengan format rgba hitam dengan tingkat transparan 0,4. Dan tampilannya akan seperti pada gambar di bawah ini ya teman-teman.

Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka

Tampilan sebelum sidenav dibuka.

Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka

Tampilan setelah sidenav dibuka.

Demikian artikel tentang Membuat Efek Transparan Pada Body Ketika Sidenav Dibuka. Semoga bermanfaat dan selamat mencoba ya teman-teman.