Cách thực hiện - Điều hướng dưới cùng
Tìm hiểu cách tạo menu điều hướng phía dưới bằng CSS.
Menu điều hướng dưới cùng
Tạo một menu điều hướng phía dưới
Bước 1) Thêm HTML:
Ví dụ
<div class="navbar">
<a href="#home"
class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Bước 2) Thêm CSS:
Ví dụ
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
width:
100%;
}
/*
Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add
a color to the active/current link */
.navbar
a.active {
background-color: #04AA6D;
color: white;
}
Hãy tự mình thử »Mẹo: Để tạo thanh điều hướng phía dưới đáp ứng, 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 phía dưới đá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.