Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Wed Design. Pembahasan sebelumnya saya pernah membahas tentang membuat efek transparan pada body ketika sidenav dibuka dan  konten akan bergeser ke arah kanan. Tidak jauh beda dengan pembahasan sebelumnya dan kali ini saya membahas tentang cara Membuat Side Navigation Full Width Ketika Dibuka.

Langkah pertama untuk membuat Membuat Side Navigation Full Width Ketika 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 side navigation dengan lebar yang full. Berikut scriptnya ya teman-teman.

Teman-teman bisa perhatikan script di atas. Dimana ketika side navigation dibuka maka menu side navigation akan muncul dengan lebar full dan pada konten yang ada di dalam id main akan ditutupi oleh side navigationnya. Dan tampilannya akan seperti pada gambar di bawah ini ya teman-teman.

Membuat Side Navigation Full Width Ketika Dibuka

Tampilan sebelum sidenav dibuka.

Membuat Side Navigation Full Width Ketika Dibuka

Tampilan setelah sidenav dibuka.

Demikian artikel tentang Membuat Side Navigation Full Width Ketika Dibuka. Semoga bermanfaat dan selamat mencoba ya teman-teman.