Tạo thanh tìm kiếm ẩn bằng HTML, CSS và JavaScript
Các phần tử GUI tương tác giúp ứng dụng của bạn dễ sử dụng hơn. HTML bao gồm một số thành phần biểu mẫu theo mặc định, nhưng bạn sẽ muốn sử dụng CSS để chúng phù hợp với thiết kế của bạn. Bạn cũng có thể sử dụng JavaScript để mở rộng hoặc sửa đổi hành vi của chúng.
Bạn có thể tạo các thành phần như vậy bằng cách sử dụng thư viện như Tailwind, nhưng bạn cũng nên biết cách tạo chúng từ đầu.
Tìm hiểu cách tạo thanh tìm kiếm ẩn bằng HTML, CSS và JavaScript.
Mục Lục
Tạo cấu trúc nội dung với HTML
Đây là mã HTML cho tính năng này. Bạn sẽ có một phần tử cha chứa đầu vào và phần tử nút. Bạn cũng sẽ nhập các tập lệnh tuyệt vời về phông chữ cho biểu tượng tìm kiếm. Trong trường hợp này, bạn sẽ sử dụng biểu tượng tìm kiếm 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="parent">
<input class="input" type="type" placeholder="Search..." />
<button class="btn">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</div>
</body>
</html>
Tạo kiểu cho giao diện bằng CSS
Trong tệp CSS, bạn cần cung cấp cho phần tử cha vị trí tương đối. Vị trí tương đối cho phép các phần tử đầu vào và nút di chuyển xung quanh phần tử gốc. Thuộc tính vị trí CSS kiểm soát một số loại bố cục, vì vậy đây là một thuộc tính quan trọng cần hiểu.
Bạn cũng sẽ căn chỉnh cả hai yếu tố ở trung tâm để nhìn rõ hơn. Nhưng trên ứng dụng của bạn, bạn có thể chọn để có thanh tìm kiếm bất cứ khi nào bạn muốn. Ngoài ra, cung cấp cho cả hai phần tử cùng chiều rộng để chúng trông có cùng kích thước và không phần tử nào lớn hơn phần tử kia.
Sau đó, bạn phải cung cấp cho lớp cha một lớp đang hoạt động cho cả phần tử đầu vào và nút. Bằng cách này, nó sẽ biến đổi như đã chỉ định bất cứ khi nào 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;
}
Bạn sẽ có một nút tìm kiếm giống như vậy:
Thêm chức năng JavaScript
Tiếp theo, viết mã JavaScript cho các phần tử. Đầu tiên, chọn các thành phần cha, đầu vào và nút bằng cách sử dụng JavaScript truy vấnSelector() phương pháp.
Sau đó, thêm trình xử lý sự kiện nhấp chuột vào nút. Vì vậy, khi được nhấp vào, nút sẽ chuyển đổi theo lớp đã chọn. thêm tập trung() phương pháp để đặt tiêu điểm vào phần tử được 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ư thể hiện trong sơ đồ sau:
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 tuyệt phải không? Bạn có thể xem mã này và thử với thanh tìm kiếm trên codepen.io. Bạn có thể tùy chỉnh thêm thanh tìm kiếm bằng cách tạo danh sách các mục trên thanh tìm kiếm. Điều này giúp người dùng của bạn thực hiện tìm kiếm trên ứng dụng dễ dàng hơn.
Các tính năng khác bạn có thể tạo
Là người mới bắt đầu phát triển web, bạn có thể tạo nhiều tính năng bằng HTML, CSS và JavaScript. Bạn có thể tạo cửa sổ bật lên/phương thức, thanh trượt hình ảnh, trình cập nhật tự động Chân trang, v.v.
Những dự án sáng tạo như vậy rất tốt cho việc học các khái niệm lập trình. Bạn có thể áp dụng các kỹ năng khi bạn học chúng, điều này làm tăng tính hữu ích của kỹ năng. Ngoài ra, bạn có thể tạo giao diện người dùng tuyệt vời mà bạn và người dùng của bạn sẽ thích. Sử dụng hướng dẫn này để tạo thanh tìm kiếm ẩn và các tính năng tương tác khác cho trang web của bạn.