Cách thực hiện - Thanh điều hướng có biểu tượng
Tìm hiểu cách tạo menu điều hướng phản hồi nhanh bằng các biểu tượng bằng cách sử dụng CSS.
Thanh điều hướng có biểu tượng
Tạo thanh điều hướng đáp ứng với các biểu tượng
Bước 1) Thêm HTML:
Ví dụ
<!-- Load an icon library -->
<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>
Home</a>
<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
<a href="#"><i
class="fa fa-fw fa-user"></i> Login</a>
</div>
Bước 2) Thêm CSS:
Ví dụ
/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
/* Navbar links on
mouse-over */
.navbar a:hover {
background-color: #000;
}
/* Current/active navbar link */
.active {
background-color: #04AA6D;
}
/* Add responsiveness - will automatically display the
navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn về Thanh điều hướng CSS của chúng tôi để tìm hiểu thêm về các thanh điều hướng.
Mẹo: Nếu bạn muốn tạo thanh điều hướng chỉ chứa các biểu tượng, hãy đọc Cách thực hiện - Hướng dẫn về thanh biểu tượng của chúng tôi.