Oleh / Web Design

Membuat Menu Responsive Dengan CSS Tanpa jQuery

Membuat menu responsive dengan CSS tanpa jQuery ini jadi penting jika website mengedepankan kecepatan. Responsive menu sekarang ini sudah menjadi keharusan dalam suatu website. Kenapa? Karena dengan banyaknya user yang mengakses via mobile maka untuk memberikan desain yang user-friendly, maka navigas-navigasi website harus mendukung responsive menu agar bisa memberikan tampilan desain yang bagus.Membuat menu responsive dengan CSS tanpa jQuery ini jadi penting jika website mengedepankan kecepatan. Responsive menu sekarang ini sudah menjadi keharusan dalam suatu website. Kenapa? Karena dengan banyaknya user yang mengakses via mobile maka untuk memberikan desain yang user-friendly, maka navigas-navigasi website harus mendukung responsive menu agar bisa memberikan tampilan desain yang bagus.

Ada banyak cara membuat menu responsive dengan menggunakan jQuery, sesungguhnya dengan trik CSS kita dapat mengaplikasikan menu responsive cukup hanya dengan CSS saja. Kenapa tidak menggunakan jQuery, alasan utama adalah untuk membantu percepatan dalam mengakses website/blog agar tidak terlalu banyak request javascript dimana hal itu bisa membuat lambat website.

Teknik atau Trik Membuat Menu Responsive Hanya Dengan CSS

Trik ini akan menggunakan elemen<input> dan<label> untuk menampilkan menu yang disembunyikan khusus pada gadget mobile. Namun tidak menutup kemungkinan, trik ini bisa diaplikasikan pada layar desktop juga. Perlu diingat, bahwa penempatan elemen <label> harus sejajar dengan elemen master navigasi/menu pada struktur HTMLnya. Jika tidak sejajar, maka trik ini tidak bisa dilakukan.

Struktur HTML

Teman-teman perlu diingat bahwa penempatan struktur elemen <label>, <input> dengan <ul> harus sejajar. Kita menggunakan input type="checkbox" dimana ketika user melakukan klik <input> / "checked" maka <ul> akan kita munculkan.

CSS

Cukup sederhana bukan? Dalam CSS, kita menggunakan "~" dalam trik ini untuk memerintah <nav> agar muncul karena defaultnya adalah tersembunyi atau display: none.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *