Cách tạo: Menu điều hướng đáy trang phóng to

Học cách sử dụng CSS và JavaScript để tạo menu điều hướng đáy trang phóng to.

Tạo thanh điều hướng đáy trang phóng to

Bước 1 - Thêm HTML:

<div class="navbar" id="myNavbar">
  <a href="#home">Trang chủ</a>
  <a href="#news">Tin tức</a>
  <a href="#contact">Liên hệ</a>
  <a href="#about">Giới thiệu</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

Liên kết có class="icon" được sử dụng để mở và đóng thanh điều hướng trên màn hình nhỏ.

Bước 2 - Thêm CSS:

/* Đặt thanh điều hướng ở cuối trang và làm cho nó cố định */
.navbar {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}
/* Đặt định dạng phong cách cho 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;
  font-size: 17px;
}
/* Thay đổi màu sắc liên kết khi con trỏ chuột chạm vào */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Thêm màu nền xanh lá cây cho liên kết hoạt động */
.navbar a.active {
  background-color: #04AA6D;
  color: white;
}
/* Ẩn liên kết mở và đóng thanh điều hướng trên màn hình nhỏ */
.navbar .icon {
  display: none;
}

Thêm truy vấn truyền thông:

/* Khi độ rộng màn hình nhỏ hơn 600 pixel, ẩn tất cả các liên kết trừ liên kết đầu tiên ("Home") và hiển thị liên kết mở và đóng thanh điều hướng (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
/* Khi người dùng nhấp vào biểu tượng, sử dụng JavaScript để thêm lớp "responsive" vào thanh điều hướng. */
Loại này giúp thanh điều hướng trông tốt hơn trên màn hình nhỏ (hiển thị liên kết thẳng đứng thay vì ngang) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Bước 3 - Thêm JavaScript:

/* Khi người dùng nhấp vào biểu tượng, chuyển đổi giữa việc thêm và xóa lớp "responsive" trong thanh điều hướng */
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  }
    x.className = "navbar";
  }
}

Thử ngay

Trang liên quan

Giáo trình:Thanh 导航 CSS