Hướng Tạo Thanh Search Bar Bằng CSS - Freetuts

Search Bar (thanh tìm kiếm) là chức năng không thể thiếu trong mọi trang web. Search bar giúp người dùng dễ dàng tìm kiếm thông tin họ cần mà không phải tìm trong tất cả các danh mục của trang web. Có một thanh search bar sẽ giúp cho trang web của bạn thân thiện với người dùng hơn, giảm thời gian tải trang khi người dùng thực hiện tìm kiếm.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Đây là một ví dụ về thanh search bar.

Giờ mình cùng vào làm ví dụ cụ thể nhé các bạn

Bài viết này được đăng tại [free tuts .net]

Search Bar

Đầu tiên mình làm một thanh tìm kiếm đơn giản đặt trong thanh navigation cho các bạn dễ hình dung nhé.

HTML

Đầu tiên, các bạn mở file HTML và nhập vào đoạn mã sau nhé:

HTML <div class="topnav"> <a class="active" href="#home">Trang chủ</a> <a href="#about">Về chúng tôi</a> <a href="#contact">Liên hệ</a> <input type="text" placeholder="Tìm kiếm..."/> </div>

Các bạn cũng có thể đặt thanh tìm ở bên ngoài tùy theo thiết kế của trang web nhé.

CSS

Tiếp theo là đến CSS, mình thiết kế CSS cho thanh navigation và thanh tìm kiếm. Các bạn có thể tham khảo CSS của mình sau đây:

CSS RUN * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #e9e9e9; } .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #2196F3; color: white; } .topnav input[type=text] { float: right; padding: 6px; margin-top: 8px; margin-right: 16px; border: none; font-size: 17px; } @media screen and (max-width: 600px) { .topnav a, .topnav input[type=text] { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; } .topnav input[type=text] { border: 1px solid #ccc; } }

Các bạn để ý trong CSS mình có thuộc tính @media. Đây là phần css mình thiết kế để cho thanh navigation phù hợp với độ phân giải của từng màn hình (responsive). Mình thiết kế responsive cho 2 độ phân giải là >600px và <600px. Khi màn hình trình duyệt ở độ phân giải >600px, thanh navigation sẽ hiển thị theo khối ngang. Khi thanh trình duyệt ở độ phân giải <600px, thanh navigation hiển thị theo khối dọc.

Các chỉnh sửa kích thước của màn hình để thấy được sự thay đổi nhé.

Kết quả

- Thanh tìm kiếm khi màn hình trình duyệt >600px, thanh navigation hiển thị theo khối ngang.

- Áp dụng responsive, mình thu nhỏ màn hình trình duyệt <600px, thanh navigation chuyển theo khối dọc. Dưới đây là kết quả:

Các bạn run để so sánh kết quả nhé.

Search Bar với Icon button

Ví dụng tiếp theo, mình add thêm một Icon button vào cạnh thanh tìm kiếm. Nó có chức năng gửi nội dung tìm kiếm về cho server xử lý để lọc ra kết quả phù hợp với yêu cầu.

HTML

Đầu tiên là mã html nhé

HTML <div class="topnav"> <a class="active" href="#home">Trang chủ</a> <a href="#about">Về chúng tôi</a> <a href="#contact">Liên hệ</a> <div class="search-container"> <form action="/action_page.php"> <input type="text" placeholder="Tìm kiếm.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div>

CSS

CSS cũng tương tự phần trên các bạn nhé.

CSS RUN * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #e9e9e9; } .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #2196F3; color: white; } .topnav .search-container { float: right; } .topnav input[type=text] { padding: 6px; margin-top: 8px; font-size: 17px; border: none; } .topnav .search-container button { float: right; padding: 6px 10px; margin-top: 8px; margin-right: 16px; background: #ddd; font-size: 17px; border: none; cursor: pointer; } .topnav .search-container button:hover { background: #ccc; } @media screen and (max-width: 600px) { .topnav .search-container { float: none; } .topnav a, .topnav input[type=text], .topnav .search-container button { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; } .topnav input[type=text] { border: 1px solid #ccc; } }

Kết quả

Search Bar với Submit button

Với Submit button cũng tương tự như Icon button chỉ khác là mình thay icon bằng chữ Submit thôi nhé. Các bạn tham khảo bài mình sau đây:

HTML

HTML <div class="topnav"> <a class="active" href="#home">Trang chủ</a> <a href="#about">Về chúng tôi</a> <a href="#contact">Liên hệ</a> <div class="search-container"> <form action="/action_page.php"> <input type="text" placeholder="Tìm kiếm.." name="search"> <button type="submit">Submit</button> </form> </div> </div>

CSS

CSS RUN * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #e9e9e9; } .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .topnav a.active { background-color: #2196F3; color: white; } .topnav .search-container { float: right; } .topnav input[type=text] { padding: 6px; margin-top: 8px; font-size: 17px; border: none; } .topnav .search-container button { float: right; padding: 6px; margin-top: 8px; margin-right: 16px; background: #ddd; font-size: 17px; border: none; cursor: pointer; } .topnav .search-container button:hover { background: #ccc; } @media screen and (max-width: 600px) { .topnav .search-container { float: none; } .topnav a, .topnav input[type=text], .topnav .search-container button { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; } .topnav input[type=text] { border: 1px solid #ccc; } }

Kết quả

Lời kết

Để thiết kế được thanh search bar phù hợp với trang web của mình cũng không khó phải không các bạn. Một trang web muốn tiếp cận tốt đến người dùng thì phải khoa học, thân thiện và không mất nhiều thời gian load trang. Để làm được như vậy, thanh tìm kiếm là một chức năng không thể thiếu, giúp người dùng dễ dàng tìm được thứ mình muốn trong trang web của bạn. Hi vọng qua các ví dụ này sẽ giúp các bạn có một trang web khoa học và thân thiện với người dùng nhé. Chúc các bạn thành công!