Với HTML, CSS và JavaScript tạo một thanh tiềm kiếm mở rộng là việc rất đơn giản. Dưới đây là hướng dẫn chi tiết từng bước.
Các thành phần GUI tương tác giúp ứng dụng dễ sử dụng hơn. HTML mặc định bao gồm một số thành phần biểu mẫu, nhưng bạn sẽ muốn dùng CSS để chúng phù hợp với thiết kế. Bạn có thể dùng JavaScript để mở rộng hoặc chỉnh sửa hoạt động của chúng.
Bạn có thể tạo những thành phần đó bằng một thư viện như Tailwind. Tuy nhiên, biết cách tạo chúng từ đầu vẫn hữu ích. Dưới đây là cách tạo thanh tìm kiếm ẩn bằng HTML, CSS và JavaScript.
Tạo cấu trúc nội dung bằng HTML
Dưới đây là đoạn mã HTML cho tính năng mà bạn đã mô tả. Bạn sẽ có một phần tử cha chứa một phần tử nhập và một nút bấm. Đồng thời, bạn cũng sẽ tích hợp các lệnh Font Awesome để sử dụng biểu tượng tìm kiếm, trong trường hợp này là biểu tượng hình kính lúp.
<!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="search-container">
<input type="text" placeholder="Search...">
<button type="button">
<i class="fas fa-search"></i>
</button>
</div>
</body>
</html>Trong đoạn mã này:
search-containerlà phần tử cha chứa các thành phần con.inputlà thành phần nhập để người dùng nhập thông tin tìm kiếm.buttonlà nút bấm cho chức năng tìm kiếm.ivới class “fas fa-search” sử dụng Font Awesome để chèn biểu tượng tìm kiếm hình kính lúp vào nút bấm.
Tạo kiểu giao diện bằng CSS
Trong tệp CSS, việc xác định vị trí tương đối của phần tử cha là quan trọng để điều chỉnh sự di chuyển của các phần tử input và nút bấm xung quanh nó.
Để đảm bảo sự trung tâm hóa, bạn có thể căn chỉnh cả hai phần tử để chúng xuất hiện ở giữa màn hình. Tuy nhiên, trong ứng dụng của bạn, bạn có thể quyết định hiển thị thanh tìm kiếm chỉ khi cần thiết. Đồng thời, hãy đảm bảo rằng cả hai phần tử đều có cùng chiều rộng để chúng có kích thước đồng đều và không có phần tử nào lớn hơn phần tử kia.
Tiếp theo, hãy gán một class hoạt động cho phần tử cha, được áp dụng cả cho phần tử input và nút bấm. Điều này sẽ làm cho chúng biến đổi theo yêu cầu mỗi khi phần tử di chuyển.
* {
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;
}Kết quả:
Thêm tính năng JavaScript
Tiếp theo, viết code JavaScript cho các nhân tố. Đầu tiên, chọn thành phần parent, input và nút bấm bằng phương thức querySelector() của JavaScript.
Sau đó, thêm trình xử lý sự kiện nhấp chuột vào nút. Khi được nhấp vào, nút sẽ chuyển đổi theo lớp đã chọn. Thêm phương thức focus() để đặt tiêu điểm cho phần tử đã chỉ định. Nó bắt đầu nhấp nháy bất cứ khi nào thanh tìm kiếm mở rộng.
let input = document.querySelector(".input");
let btn = document.querySelector(".btn");
let parent = document.querySelector(".parent");
btn.addEventListener("click", () => {
parent.classList.toggle("active");
input.focus();
});
Nếu bạn nhấp vào nút, nó sẽ mở thanh tìm kiếm và ngược lại. Nó xuất hiện như hình bên dưới:
Bây giờ, nếu bạn nhập thông tin và nhấp vào nút, nó sẽ đóng lại khi hệ thống tìm kiếm thông tin.
Thật đơn giản phải không? Hi vọng bài viết hữu ích với các bạn.
