Buat Bilah Pencarian Tersembunyi Dengan HTML, CSS, dan JavaScript

Elemen GUI interaktif membuat aplikasi Anda lebih mudah digunakan. HTML menyertakan beberapa komponen formulir secara default, tetapi Anda ingin menggunakan CSS agar sesuai dengan desain Anda. Anda juga dapat menggunakan JavaScript untuk memperluas atau mengubah perilakunya.

Anda dapat membuat komponen seperti itu menggunakan pustaka seperti Tailwind, tetapi mengetahui cara membuatnya dari awal juga berguna.

Cari tahu cara membuat bilah pencarian tersembunyi menggunakan HTML, CSS, dan JavaScript.

Buat Struktur Konten Dengan HTML

Berikut kode HTML untuk fitur tersebut. Anda akan memiliki elemen induk yang berisi input dan elemen tombol. Anda juga akan mengimpor skrip font-awesome untuk ikon pencarian. Dalam hal ini, Anda akan menggunakan ikon pencarian kaca pembesar.

html>
<htmllang="en">
<kepala>
<metacharset="UTF-8" />
<metahttp-setara="Kompatibel dengan X-UA"isi="IE = tepi" />
<metanama="area pandang"isi="width=device-width, initial-scale=1.0" />





instagram viewer

<naskahsrc=" https://kit.fontawesome.com/d69fb28507.js"crossorigin="anonim">naskah>
<judul>Bilah Pencarian Tersembunyijudul>
kepala>

<tubuh>
<divkelas="induk">
<memasukkankelas="memasukkan"jenis="jenis"placeholder="Mencari..." />
<tombolkelas="btn">
<Sayakelas="kaca pembesar-fa-padat-fa">Saya>
tombol>
div>
tubuh>
html>

Gaya Antarmuka Menggunakan CSS

Dalam file CSS, Anda perlu memberi elemen induk posisi relatif. Posisi relatif memungkinkan elemen input dan tombol bergerak di sekitar induk. Itu Properti posisi CSS mengontrol beberapa jenis tata letak, jadi ini penting untuk dipahami.

Anda juga akan menyelaraskan kedua elemen di tengah untuk visibilitas yang lebih baik. Tetapi pada aplikasi Anda, Anda dapat memilih untuk memiliki bilah pencarian kapan pun Anda mau. Juga, beri kedua elemen lebar yang sama sehingga ukurannya terlihat sama dan tidak lebih besar dari yang lain.

Maka Anda harus memberi induk kelas aktif untuk elemen input dan tombol. Dengan cara ini, itu akan berubah seperti yang ditentukan setiap kali elemen bergerak.

* {
batas: 0;
lapisan: 0;
ukuran kotak: kotak perbatasan;
}
tubuh {
warna latar belakang: #d9d9d9;
tinggi: 100vh;
menampilkan: melenturkan;
menyelaraskan-item: tengah;
membenarkan-konten: tengah;
}
.induk {
posisi: relatif;
}
.memasukkan {
garis besar: tidak ada;
berbatasan: tidak ada;
radius perbatasan: 100px;
lapisan: 5px 10px;
lebar: 40px;
transisi: lebar 0.3 dtkkemudahan;
}
.memasukkan:: tempat penampung {
warna: hijau;
}
.induk.aktif.memasukkan {
lebar: 200px;
}
.btn {
lebar: 40px;
lapisan: 5px 10px;
kursor: penunjuk;
radius perbatasan: 100px;
berbatasan: tidak ada;
latar belakang: hijau;
menampilkan: Di barisan;
bayangan kotak: 0 0 5pxrgba(0, 0, 0, 0.2);
posisi: mutlak;
atas: 0;
kiri: 0;
transisi: mengubah 0.3 dtkkemudahan;
}
.induk.aktif.btn {
mengubah: translateX(210px);
}
.fa-padat {
warna: #ffffff;
}

Anda harus memiliki tombol pencarian yang terlihat seperti ini:

Tambahkan Fungsionalitas JavaScript

Selanjutnya, tulis kode JavaScript untuk elemen tersebut. Pertama, pilih elemen induk, masukan, dan tombol menggunakan JavaScript querySelector() metode.

Kemudian, tambahkan pendengar acara klik ke tombol. Jadi saat diklik, tombol akan berpindah-pindah sesuai kelas yang dipilih. Tambahkan fokus() metode untuk mengatur fokus pada elemen yang ditentukan. Itu mulai berkedip setiap kali bilah pencarian mengembang.

membiarkan masukan = dokumen.querySelector(".memasukkan");
membiarkan btn = dokumen.querySelector(".btn");
membiarkan induk = dokumen.querySelector(".induk");
btn.addEventListener("klik", () => {
 induk.classList.toggle("aktif");
 masukan.fokus();
});

Jika Anda mengklik tombol, itu membuka bilah pencarian dan sebaliknya. Tampilannya seperti pada diagram berikut:

Sekarang, jika Anda mengetikkan informasi dan mengklik tombol itu menutup saat sistem mencari informasi tersebut.

Keren, bukan? Anda dapat melihat kode ini dan bermain-main dengan bilah pencarian aktif codepen.io. Anda dapat menyesuaikan bilah pencarian lebih lanjut dengan membuat daftar bilah pencarian item. Ini memudahkan pengguna Anda untuk melakukan penelusuran di aplikasi.

Fitur Lain yang Dapat Anda Buat

Sebagai pemula dalam pengembangan web, ada banyak fitur yang dapat Anda buat dengan HTML, CSS, dan JavaScript. Anda dapat membuat popup/modal window, image slider, Footer auto-updater, dan banyak lagi.

Proyek kreatif semacam itu bagus untuk mempelajari konsep pemrograman. Anda dapat menerapkan keterampilan saat Anda mempelajarinya yang meningkatkan kegunaan keterampilan tersebut. Selain itu, Anda dapat membuat antarmuka pengguna yang luar biasa yang akan dinikmati oleh Anda dan pengguna Anda. Gunakan panduan ini untuk membuat bilah pencarian tersembunyi dan fitur interaktif lainnya untuk situs Anda.