Halo sahabat semua, kembali lagi dengan saya di website tips dan trik Dumet School. Pada artikel kali ini saya akan membahas tentang cara membuat menu responsive menggunakan @media queri dan trik checkbox ,untuk sahabat yang sebelumnya belum paham tentang pemakaian @media queri, coba silahkan lihat pada artikel sebelumnya disiniPertama mari kita tuliskan script html pada text-editor sahabat gunakan, seperti berikut ini:

Sebelumnya jangan lupa disave dulu ya, lalu jalankan pada browser untuk melihat hasilnya apakah sudah seperti inimenu-checkbox

Langkah berikutnya yuk kita tambah script css berikut ini:

Langsung saja disave hasilnya akan seperti ini

menu responsive-checkbox

Jika ukuran layar diperkecil ,maka akan terlihat seperti berikut:

menu responsive-trik checkbox

Kenapa hasil gambar diatas terpotong ,karena kita belum membuat tampilan yang menyesuaikan layar, yuk sekarang kita buat tampilan ini supaya menyesuaikan layar yang kita tentukan.

Langkah selanjutnya kita kembali ke file css ,lalu ketikan script dibawah ini

Pada script diatas saya menambahkan @media (max-widht: 500px) yang berarti disaat ukuran widht 500px maka menu akan seperti ini

         menu-responsive-checkboxmenu respon checkbox

Gambar diatas merupakan perbedaan saat ukuran width lebih besar 500px list menu masih terlihat dan saat width berubah menjadi 500px maka menjadi toggle/3 garis mendatar.

Jadi pada artikel cara membuat menu responsive menggunakan @media queri dan trik checkbox . Sahabat klik pada toggle/3 garis mendatar maka menu akan terlihat kembali seperti gambar berikut

Cara membuat menu responsive-trikcheckbox

Oke pembahasan artikel cara membuat menu responsive menggunakan @media queri dan trik checkbox ,saya rasa cukup sampai disini ,semoga bermanfaat dan sampai berjumpa lagi pada artikel selanjutnya.

Terimakasih.