Cách tạo: nút hướng dẫn phụ

Cách tạo hướng dẫn phụ cuộn tròn

Bước 1 - Thêm HTML:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Giới thiệu</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Dự án</a>
  <a href="#" id="contact">Liên hệ</a>
</div>

Bước 2 - Thêm CSS:

/* đặt kiểu cho liên kết bên trong hướng dẫn phụ */
#mySidenav a {
  position: absolute; /* định vị chúng tương đối với cửa sổ trình duyệt */
  left: -80px; /* đặt chúng ở bên ngoài màn hình */
  transition: 0.3s; /* thêm hiệu ứng chuyển đổi khi trỏ chuột vào */
  padding: 15px; /* lề trong 15px */
  width: 100px; /* đặt chiều rộng cụ thể */
  text-decoration: none; /* xóa underline */
  font-size: 20px; /* tăng kích thước字体 */
  color: white; /* đặt màu văn bản thành trắng */
  border-radius: 0 5px 5px 0; /* góc phải trên và phải dưới làm tròn */
}
#mySidenav a:hover {
  left: 0; /* khi trỏ chuột vào, hiển thị phần tử theo cách đúng đắn */
}
/* liên kết about: cách trên cùng 20px, nền xanh lá cây */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* xanh dương */
}
#projects {
  top: 140px;
  background-color: #f44336; /* đỏ */
}
#contact {
  top: 200px;
  background-color: #555 /* nâu nhạt */
}

Thử ngay

Trang liên quan

Hướng dẫn:Thanh điều hướng CSS