CÁCH THỰC HIỆN - Thanh điều hướng với các biểu tượng
Tìm hiểu cách tạo menu điều hướng đáp ứng với các biểu tượng bằng cách sử dụng CSS.
Thanh điều hướng với các biểu tượng
Tạo một thanh điều hướng đáp ứng với các biểu tượng
Bước 1) Thêm HTML:
Thí 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:
Thí 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;
}
}
Mẹo: Đi tới Hướng dẫn CSS Navbar 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 Hướng dẫn Cách thực hiện - Thanh biểu tượng của chúng tôi .