Membuat Menu Dropdown Dengan Checkbox

Hallo teman-teman DUMET School, Ketemu lagi dengan saya di Blog DUMET School, pada kesempatan kali ini saya akan berbagi tips dan trik untuk teman-teman DUMET School semuanya nih yaitu membuat Menu Dropdown menggunakan Checkbox. Seperti yang kita ketahui dalam membuat menu dropdown biasanya kita membuatnya menggunakan elemen atau tag <menu>, tetapi di sini kita akan membuat menu dropdown tersebut dengan menggunakan elemen Checkbox. Teknik nya sebenarnya hampir sama dengan cara kita membuat menu dropdown menggunakan elemen atau tag <menu> kita akan menggunakan property CSS display: none; untuk menghilangkan elemen menu dropdown tersebut, kemudian kita akan munculkan kembali menu dropdown tersebut dengan menggunakan property CSS display: block ketika kita klik checkbox tersebut. Dari pada kita bingung dengan teorinya mending kita langsung praktekkan saja ya teman-teman. Teman-teman bisa ikuti step by step nya di bawah ini.

Pertama kalian bisa buat struktur HTML nya seperti gambar di bawah ini.

Kemudian untuk CSS nya kalian bisa ikuti gambar di bawah ini.

Maka jika kalian jalankan hasilnya seperti ini.

Download