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.

Membuat Menu Dropdown Dengan Checkbox

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

Membuat Menu Dropdown Dengan Checkbox

Membuat Menu Dropdown Dengan Checkbox

Membuat Menu Dropdown Dengan Checkbox

Maka jika kalian jalankan hasilnya seperti ini.

Download 

15 Agustus 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat