LÀM THẾ NÀO ĐỂ - Các nút điều hướng bên
Tìm hiểu cách tạo các nút điều hướng bên có thể di chuyển bằng CSS.
Cách tạo Sidenav có thể lưu trữ
Bước 1) Thêm HTML:
Thí dụ
<div id="mySidenav" class="sidenav">
<a href="#"
id="about">About</a>
<a href="#" id="blog">Blog</a>
<a
href="#" id="projects">Projects</a>
<a href="#"
id="contact">Contact</a>
</div>
Bước 2) Thêm CSS:
Thí dụ
/* Style the links inside the sidenav */
#mySidenav a {
position: absolute;
/* Position them relative to the browser window */
left: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Add transition on hover */
padding: 15px; /* 15px
padding */
width: 100px; /* Set a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px; /* Increase font size */
color: white;
/* White text color */
border-radius: 0 5px 5px 0; /*
Rounded corners on the top right and bottom right side */
}
#mySidenav
a:hover {
left: 0; /* On mouse-over, make the elements
appear as they should */
}
/* The about link: 20px from the top with
a green background */
#about {
top: 20px;
background-color: #04AA6D;
}
#blog {
top: 80px;
background-color: #2196F3; /* Blue */
}
#projects {
top: 140px;
background-color: #f44336; /* Red */
}
#contact {
top: 200px;
background-color: #555 /* Light Black */
}
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.