Hướng dẫn responsive navigation menu bar using html & css - thanh menu điều hướng đáp ứng bằng html & css

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

Bước 2) Thêm CSS:

Thí dụ

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

& nbsp; Nhà & nbsp; Tin tức & NBSP; Liên hệ & nbsp; Về & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

Liên kết với class = "biểu tượng" được sử dụng để mở và đóng topnav trên các màn hình nhỏ.
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Bước 2) Thêm CSS:
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/ * Thêm màu nền màu đen vào điều hướng hàng đầu */. Topnav {& nbsp; & nbsp; màu nền: #333; & nbsp; tràn: ẩn;}
.topnav .icon {
  display: none;
}

/ * Kiểu các liên kết bên trong thanh điều hướng */. Topnav a {& nbsp; Phao: trái; & nbsp; Hiển thị: Khối; & nbsp; Màu sắc: #f2f2f2; & nbsp; Văn bản-Align: Trung tâm; & nbsp; Đệm: 14px 16px; & nbsp; DECORT TEXTION: Không có; & nbsp; & nbsp; font-size: 17px;}

Thí dụ

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

& nbsp; Nhà & nbsp; Tin tức & NBSP; Liên hệ & nbsp; Về & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
@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;
  }
}

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

Thí dụ

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Hãy tự mình thử »

Tạo một topnav đáp ứng Go to our CSS Navbar Tutorial to learn more about navigation bars.

Bước 1) Thêm HTML:W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Thí dụ

* no credit card required

Tìm hiểu làm thế nào để tạo một thanh điều hướng đáp ứng với thả xuống.

Topnav đáp ứng với thả xuống

Hãy tự mình thử »

Mẹo: Chuyển đến hướng dẫn thả xuống CSS của chúng tôi để tìm hiểu thêm về thả xuống.

Mẹo: Chuyển đến các thả xuống có thể nhấp để tìm hiểu thêm về các thả xuống có thể nhấp chuột

Thí dụ

. & nbsp; if (x.ClassName === "TopNav") {& nbsp; & nbsp; & nbsp; x.ClassName += "Phản hồi"; & nbsp; & nbsp;} other {& nbsp; & nbsp; & nbsp; X.ClassName = "TopNav"; & nbsp; & nbsp;}}
  Home
  News
  Contact
 

Hãy tự mình thử »

Thí dụ

. & nbsp; if (x.ClassName === "TopNav") {& nbsp; & nbsp; & nbsp; x.ClassName += "Phản hồi"; & nbsp; & nbsp;} other {& nbsp; & nbsp; & nbsp; X.ClassName = "TopNav"; & nbsp; & nbsp;}}
.topnav {
  background-color: #333;
  overflow: hidden;
}

Hãy tự mình thử »
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

Mẹo: Chuyển đến hướng dẫn thả xuống CSS của chúng tôi để tìm hiểu thêm về thả xuống.
.active {
  background-color: #04AA6D;
  color: white;
}

Mẹo: Chuyển đến các thả xuống có thể nhấp để tìm hiểu thêm về các thả xuống có thể nhấp chuột
.topnav .icon {
  display: none;
}

Mẹo: Đi đến hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về Navbars.
.dropdown {
  float: left;
  overflow: hidden;
}

Mẹo: Đi đến hướng dẫn điều hướng phụ của chúng tôi để tìm hiểu về cách tạo các điều hướng bên có thể đóng lại.
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

Tìm hiểu làm thế nào để tạo một thanh điều hướng đáp ứng với thả xuống.
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

Topnav đáp ứng với thả xuống
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

Tạo một topnav đáp ứng với thả xuống
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

Bước 1) Thêm HTML:
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

& nbsp; Nhà & nbsp; Tin tức & NBSP; Liên hệ & nbsp; & nbsp; & nbsp; & nbsp; Thả xuống & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Liên kết 1 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Liên kết 2 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Liên kết 3 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Về & nbsp; ☰
.dropdown:hover .dropdown-content {
  display: block;
}

Bước 2) Thêm CSS:
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* Lớp "Phản hồi" được thêm vào Topnav với JavaScript khi người dùng nhấp vào biểu tượng. Lớp này làm cho topnav trông đẹp trên các màn hình nhỏ (hiển thị các liên kết theo chiều dọc thay vì theo chiều ngang) .TopNav.Responsive {vị trí: tương đối;} & nbsp; .topnav.Responsive a.icon {& nbsp; & nbsp; & nbsp; Vị trí: Tuyệt đối; & nbsp; & nbsp; & nbsp; Phải: 0; & nbsp; & nbsp; & nbsp; Top: 0; & nbsp; } & nbsp; .topnav.Responsive a {& nbsp; & nbsp; & nbsp; Float: Không có; & nbsp; & nbsp; & nbsp; Hiển thị: khối; & nbsp; & nbsp; & nbsp; Văn bản-Align: trái; & nbsp; } & nbsp; .TopNav.Responsive .Dropdown {float: none;} & nbsp; .TopNav.Responsive .Dropdown-Content {vị trí: tương đối;} & nbsp; .TopNav.Responsive .dropdown .dropbtn {& nbsp; & nbsp; & nbsp; Hiển thị: khối; & nbsp; & nbsp; & nbsp; chiều rộng: 100%; & nbsp; & nbsp; & nbsp; Văn bản-Align: trái; & nbsp; }}
@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:

Thí dụ

.& nbsp;if (x.ClassName === "TopNav") {& nbsp; & nbsp; & nbsp;x.ClassName += "Phản hồi"; & nbsp; & nbsp;} other {& nbsp; & nbsp; & nbsp;X.ClassName = "TopNav"; & nbsp; & nbsp;}}
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Hãy tự mình thử »

Mẹo: Chuyển đến hướng dẫn thả xuống CSS của chúng tôi để tìm hiểu thêm về thả xuống. Go to our CSS Dropdowns Tutorial to learn more about dropdowns.

Mẹo: Chuyển đến các thả xuống có thể nhấp để tìm hiểu thêm về các thả xuống có thể nhấp chuột Go to our Clickable Dropdowns to learn more about clickable dropdowns

Mẹo: Đi đến hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về Navbars. Go to our CSS Navbar Tutorial to learn more about navbars.

Mẹo: Đi đến hướng dẫn điều hướng phụ của chúng tôi để tìm hiểu về cách tạo các điều hướng bên có thể đóng lại. Go to our Side Navigation Tutorial to learn about how to create closable side navigations.