MENUS
IMAGES
BUTTONS
FORMS
FILTERS
TABLES
MORE
WEBSITE
GRID
GOOGLE MAP
CONVERTERS
HOW TO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Hướng tạo thanh search bar bằng CSS

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.

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

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

code png

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

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.

Untitled png

- Á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ả:

Untitled 2  png

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ả

code png

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ả

Untitled 1  png

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!

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top