Cách tạo: Thanh điều hướng có biểu tượng

Học cách sử dụng CSS để tạo thanh điều hướng phản hồi có biểu tượng.

Tạo thanh điều hướng phản hồi có biểu tượng

Bước 1 - Thêm HTML：

Tải thư viện biểu tượng
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Trang chủ</a>
  <a href="#"><i class="fa fa-fw fa-search"></i> Tìm kiếm</a>
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Liên hệ</a>
  <a href="#"><i class="fa fa-fw fa-user"></i> Đăng nhập</a>
</div>

Bước 2 - Thêm CSS:

/* Đặt kiểu nawbar */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Kiểu liên kết nawbar */
.navbar a {
  float: left;
  text-align: center;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}
/* Kiểu liên kết nawbar khi di chuột trỏ vào */
.navbar a:hover {
  background-color: #000;
}
/* Liên kết nawbar hiện tại / hoạt động */
.active {
  background-color: #04AA6D;
}
/* Thêm khả năng phản hồi - Hiển thị thanh nawbar thẳng đứng tự động trên màn hình nhỏ hơn 500 pixel, thay vì hiển thị ngang Add responsiveness - sẽ hiển thị thanh nawbar thẳng đứng tự động trên màn hình nhỏ hơn 500 pixel */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

Thử ngay

Trang liên quan

Giáo trình:Thanh điều hướng CSS

Giáo trình:Cách tạo thanh điều hướng biểu tượng