syntax.quotes
TS
syntax.quotes
Tutorial Cara Membuat Form Pencarian Tersembunyi Dengan Jquery
Setiap website dinamis membutuhkan form pencarian, form pencarian ini sangat berguna untuk mempermudah pengunjung dalam menemukan tulisan yang dia inginkan dengan cepat.

Setiap website memiliki desain yang unik dan berbeda-beda, ada kalanya seorang desainer kebingungan dimana harus menempatkan form pencarian tersebut karena minimnya space atau tidak adanya tempat yang cocok untuk meletakan field untuk mengetik kata kunci. Sehingga sekarang ini sangat nge-trend form pencarian yang disembunyikan dan hanya menampilkan icon pencarian(kaca pembesar) saja. Ketika icon itu di klik baru lah form nya muncul dan pengunjung bisa mengetikan kata kunci disitu.



expanding dropdown form search

Pada tutorial kali ini kita akan mencoba untuk membuat model form pencarian yang seperti itu.
Membuat Struktur HTML

Pertama kita akan membuat struktur HTML nya terlebih dahulu, disini saya hanya akan menuliskan bagian header nya saja agar anda tidak bingung, karena bagian-bagian lain hanya pelengkap saja.

Quote:


Menu dan Form

Disitu terlihat kalau kita menggunakan class fa fa-search fa-4x untuk menampilkan icon pencarian, yang dibungkus dengan sebuah div dengan ID #searchtoggl. Agar icon tersebut muncul kita terlebih dahulu menyertakan kode css dari font awesome di bagian head website. Anda bisa membaca penggunaan font awesome ini secara singkat di artikel Tulisan Berbentuk Icon Untuk Desain Website.
Mempercantik Dengan CSS

Agar tampilan terlihat menarik kita tentunya membutuhkan script css, disini kita hanya akan menyoroti potongan kode dari form pencarian dan menu saja, karena pada bagian itulah yang paling terpenting untuk membentuk tampilan form pencarian tersembunyi tersebut.

Quote:


Mengatur Header dan Form Pencarian

Terlihat disitu kita menggunakan property display:none pada ID #searchbar agar form pencarian hilang atau tidak ditampilkan saat website pertama kali dijalankan. Form akan muncul hanya ketika icon pencarian di klik, dan untuk memunculkan itu kita butuh Jquery untuk memproses trigger even on click, jadi ketika icon di klik jquery akan merubah display:none menjadi display:block agar form terlihat. Dan ketika icon di klik untuk kedua kalinya maka form akan menghilang, karena dengan jquery kita merubah display:block kembali menjadi display:none untuk menyembunyikan ID #searchbar
Animasi Dengan Jquery

Untuk merubah-rubah class css dengan mudah, kita membutuhkan jquery. Bila pengunjung melalukan klik pada icon pencarian(kaca pembesar) yang ada di menu maka jquery akan merubah class asli dari Font Awesome menjadi .fa-search-minus. Dari sudut pandang User Experience (UX) ini sangat fantastis karena membantuk untuk membedakan antara kolom pencarian tersembunyi dan terlihat

Quote:


Selesai !!! emoticon-Shakehand2
0
2K
0
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Mari bergabung, dapatkan informasi dan teman baru!
Website, Webmaster, Webdeveloper
Website, Webmaster, Webdeveloper
icon
23.2KThread4.2KAnggota
Guest
Tulis komentar menarik atau mention replykgpt untuk ngobrol seru
Ikuti KASKUS di
© 2023 KASKUS, PT Darta Media Indonesia. All rights reserved.