如何创建：响应式顶部导航栏

学习如何使用 CSS 和 JavaScript 创建响应式顶部导航栏。

创建响应式顶部导航菜单

第一步 - 添加 HTML：

/* 加载图标库以在小屏幕上显示汉堡菜单（横杠） */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

class="icon" 的链接用于在小屏幕上打开和关闭顶部导航。

第二步 - 添加 CSS：

/* 为顶部导航添加黑色背景色 */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* 设置导航栏中链接的样式 */
.topnav 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 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Thêm lớp hoạt động để nổi bật trang hiện tại */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
/* Ẩn liên kết mở và đóng topnav trên màn hình nhỏ */
.topnav .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 topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* Khi người dùng nhấp vào biểu tượng, JavaScript sẽ thêm lớp "responsive" vào topnav. Lớp này giúp topnav 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) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.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 thêm hoặc xóa bỏ lớp "responsive" trên topnav */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  }
    x.className = "topnav";
  }
}

Thử ngay

Trang liên quan

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