Cách tạo: Menu thẳng đứng

Cách tạo nhóm nút thẳng đứng

Bước 1 - Thêm HTML:

<div class="vertical-menu">
  <a href="#" class="active">Trang chủ</a>
  <a href="#">Liên kết 1</a>
  <a href="#">Liên kết 2</a>
  <a href="#">Liên kết 3</a>
  <a href="#">Liên kết 4</a>
</div>

Bước 2 - Thêm CSS:

.vertical-menu {
  width: 200px; /* Nếu bạn muốn, bạn có thể đặt chiều rộng */
}
.vertical-menu a {
  background-color: #eee; /* Màu nền xám */
  color: black; /* Màu chữ đen */
  display: block; /* Hiển thị liên kết một sau một */
  padding: 12px; /* Thêm một chút không gian trong lòng */
  text-decoration: none; /* Xóa underline của liên kết */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Màu nền xám đậm khi di chuột qua */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Thêm màu xanh lá cây cho liên kết 'hoạt động/hiện tại' */
  color: white;
}

Thử ngay

Thanh menu cuộn thẳng đứng

Nếu bạn muốn có thanh menu cuộn thẳng đứng, hãy đặt chiều cao cụ thể và thêm overflow Thuộc tính:

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

Thử ngay

Trang liên quan

Hướng dẫn:Cách tạo thanh guida bên