Cách tạo: Menu cố định

Cách tạo menu cố định ở đầu

Bước 1 - Thêm HTML:

<div class="navbar">
  <a href="#home">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
</div>
<div class="main">
  <p>Các văn bản một số văn bản một số văn bản một số văn bản...</p>
</div>

Bước 2 - Thêm CSS:

Để tạo menu cố định ở đầu, hãy sử dụng position:fixed và top:0Lưu ý, menu cố định sẽ che盖 khác nội dung của bạn. Để giải quyết vấn đề này, hãy thêm một margin-top bằng hoặc lớn hơn chiều cao của menu trên nội dung của bạn.

/* Thanh điều hướng */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Đặt thanh điều hướng ở vị trí cố định */
  top: 0; /* Đặt thanh điều hướng ở đầu trang */
  width: 100%; /* Rộng toàn màn hình */
}
/* Liên kết trong thanh điều hướng */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Thay đổi nền khi con trỏ chuột trỏ vào */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Nội dung chính */
.main {
  margin-top: 30px; /* Them margin trên ngoài để tránh trùng lặp nội dung */
}

Thử ngay

Cách tạo menu cố định ở đáy

Để tạo menu cố định ở đáy, hãy sử dụng position:fixed và bottom:0:

/* Thanh điều hướng */
.navbar {
  position: fixed; /* Đặt thanh điều hướng ở vị trí cố định */
  bottom: 0; /* Đặt thanh điều hướng ở cuối trang */
  width: 100%; /* Rộng toàn màn hình */
}
/* Nội dung chính */
.main {
  margin-bottom: 30px; /* Them margin dưới ngoài để tránh trùng lặp nội dung */
}

Thử ngay

Trang liên quan

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