Cách tạo: Thanh định hướng phản hồi có trình đơn thả xuống

Học cách tạo thanh định hướng phản hồi có trình đơn thả xuống.

Tạo thanh định hướng phản hồi có trình đơn thả xuống

Bước 1 - Thêm HTML:

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

Bước 2 - Thêm CSS:

/* Thêm màu nền đen cho thanh 导航 trên cùng */
.topnav {
  màu nền: #333;
  dư lượng: ẩn;
}
/* Đặt định dạng cho liên kết trong thanh 导航 */
.topnav a {
  float: trái;
  display: block;
  màu: #f2f2f2;
  canh giữa: giữa;
  khoảng cách: 14px 16px;
  text-decoration: none;
  cỡ chữ: 17px;
}
/* Thêm một lớp hoạt động để làm nổi bật trang hiện tại */
.active {
  màu nền: #04AA6D;
  màu: trắng;
}
/* Ẩn liên kết để mở và đóng thanh 导航 trên màn hình nhỏ */
.topnav .icon {
  display: none;
}
/* Ký tự menu thả xuống - dùng để định vị nội dung menu thả xuống */
.dropdown {
  float: trái;
  dư lượng: ẩn;
}
/* Đặt định dạng cho nút menu thả xuống để phù hợp với thanh 导航 trên cùng */
.dropdown .dropbtn {
  cỡ chữ: 17px;
  biên: none;
  khung viền: none;
  màu: trắng;
  khoảng cách: 14px 16px;
  màu nền: di truyền;
  font-family: di truyền;
  khoảng cách: 0;
}
/* Đặt định dạng nội dung menu thả xuống (mặc định là ẩn) */
.dropdown-content {
  display: none;
  position: absolute;
  màu nền: #f9f9f9;
  chiều rộng nhỏ nhất: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Đặt định dạng liên kết trong menu thả xuống */
.dropdown-content a {
  float: none;
  màu: đen;
  khoảng cách: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Thêm màu nền đậm khi chuột đè lên liên kết trên thanh 导航 và nút menu thả xuống */
.topnav a:hover, .dropdown:hover .dropbtn {
  màu nền: #555;
  màu: trắng;
}
/* Thêm màu nền xám khi chuột đè lên liên kết trong menu thả xuống */
.dropdown-content a:hover {
  màu nền: #ddd;
  màu: đen;
}
/* Khi người dùng di chuột lên nút menu thả, hiển thị menu thả */
.dropdown:hover .dropdown-content {
  display: block;
}
/* 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 trên cùng (icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    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 thanh điều hướng trên cùng. Lớp này làm cho thanh điều hướng trên cùng trông tốt hơn trên màn hình nhỏ (hiển thị liên kết theo chiều dọc thay vì chiều 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;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

Bước 3 - Thêm JavaScript:

/* Khi người dùng nhấp vào biểu tượng, giữa việc thêm và xóa lớp "responsive" trong thanh điều hướng trên cùng được chuyển đổi */
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:Danh sách rút gọn CSS

Hướng dẫn:Cách tạo menu thả có thể nhấp

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

Hướng dẫn:Cách tạo thanh điều hướng bên