Oleh / Web Design

Membuat Auto Hide Fixed Navigasi Dengan CSS dan jQuery

Auto hide atau menyembunyikan navigasi fixed atau konstan yakni menu-menu utama di atas telah menjadi trik yang umum pada desain website sekarang ini. Ada banyak faktor yang bisa disimpulkan untuk memakai teknik auto hide ini, misalnya untuk memberihkan tampilan agar user tidak melulu melihat menu-menu tersebut jika menu tersebut fixed. Maka dalam hal ini, bagaimana mengakalinya agar user tidak selalu melihat menu-menu/navigasi fixed itu? Yaitu dengan menyembunyikannya ketika user melakukan scroll ke ke bawah dan memunculkannya kembali ketika user melakukan scroll ke atas.

Logika Auto Hide Fixed Navigasi

Ketika user melakukan scroll ke bawah (scroll down) maka user ingin melihat atau membaca konten, maka apa yang sekiranya bisa menghalangi konten sebaiknya di sembunyikan, dalam hal ini termasuk menu navigasi.

Ketika user melakukan scroll ke atas (scroll up) maka user sudah membaca atau melihat konten, yang mana menyuguhkan navigasi konten-konten yang kita punya adalah sangat bermanfaat tentunya untuk mengarahkan user pada halaman-halaman yang menarik lainnya. Maka menu-menu dalam hal ini akan ditampilkan.

Struktur HMTL

Struktur HTML di bawah ini akan menyembunyikan semua elemen yang ada dalam <header> jika user melakukan scroll down.

jQuery

Ketika scroll down dilakukan, maka <header> akan menambahkan class selector .is-hidden, yang mana hal ini akan lebih mudah untuk mengatur transformasinya dengan CSS.

CSS

Dengan translateY, <header> akan di geser untuk disembunyikan. Maka value harus minus, yaitu -100% untuk menuju ke atas. Sebaliknya, jika value tidak ada minus, maka akan digeser ke bawah.

Tinggalkan Balasan

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