Buat Bilah Pencarian Tersembunyi Dengan HTML, CSS, dan JavaScript
Table of content:
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.
Baca Juga:
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.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/d69fb28507.js" crossorigin="anonymous"></script>
<title>Hidden Search Bar</title>
</head>
<body>
<div class="parent">
<input class="input" type="type" placeholder="Search..." />
<button class="btn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</body>
</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. 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.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
background-color: #d9d9d9;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.parent {
position: relative;
}
.input {
outline: none;
border: none;
border-radius: 100px;
padding: 5px 10px;
width: 40px;
transition: width 0.3s ease;
}
.input::placeholder {
color: green;
}
.parent.active .input {
width: 200px;
}
.btn {
width: 40px;
padding: 5px 10px;
cursor: pointer;
border-radius: 100px;
border: none;
background: green;
display: inline;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
transition: transform 0.3s ease;
}
.parent.active .btn {
transform: translateX(210px);
}
.fa-solid {
color: #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.
let input = document.querySelector(".input");
let btn = document.querySelector(".btn");
let parent = document.querySelector(".parent");btn.addEventListener("click", () => {
parent.classList.toggle("active");
input.focus();
});
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 item bilah pencarian. 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.
Artikel Terkait
