Cách thực hiện - Các nút menu được căn phải
Tìm hiểu cách tạo thanh điều hướng với các liên kết căn trái và căn phải.
Liên kết menu được căn phải
Tạo thanh điều hướng trên cùng
Bước 1) Thêm HTML:
Ví dụ
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="topnav-right">
<a href="#search">Search</a>
<a href="#about">About</a>
</div>
</div>
Bước 2) Thêm CSS:
Ví dụ
/*
Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/*
Style the links inside the navigation bar */
.topnav a {
float:
left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:
17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add
a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/*
Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
Hãy tự mình thử »Mẹo: Để tạo các thanh điều hướng phản hồi nhanh, thân thiện với thiết bị di động, hãy đọc hướng dẫn Cách thực hiện - Điều hướng hàng đầu đáp ứng của chúng tôi.
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.