Cách tạo: Điều hướng bên cạnh

Tạo hướng dẫn bên biên với hiệu ứng hoạt hình

Bước 1 - Thêm HTML:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Giới thiệu</a>
  <a href="#">Dịch vụ</a>
  <a href="#">Khách hàng</a>
  <a href="#">Liên hệ</a>
</div>
<!-- Sử dụng phần tử nào đó để mở hướng dẫn bên biên -->
<span onclick="openNav()">mở</span>
<!-- Nếu bạn muốn hướng dẫn bên biên đẩy nội dung trang về bên phải, hãy đặt tất cả nội dung trang trong div này (nếu bạn chỉ muốn hướng dẫn bên biên ở trên cùng trang, hãy không sử dụng cài đặt này) -->
<div id="main">
  ...
</div>

Bước 2 - Thêm CSS:

/* Menu hướng dẫn bên biên */
.sidenav {
  height: 100%; /* 100% chiều cao */
  width: 0; /* 0 chiều rộng - Sử dụng JavaScript để thay đổi cài đặt này */
  position: fixed; /* Dừng lại ở vị trí */
  z-index: 1; /* Dừng lại ở đỉnh */
  top: 0; /* Dừng lại ở đỉnh */
  left: 0;
  background-color: #111; /* Màu đen */
  overflow-x: hidden; /* Bật chế độ cuộn ngang */
  padding-top: 60px; /* Đặt nội dung cách đỉnh 60px */
  transition: 0.5s; /* Hiệu ứng chuyển đổi 0.5 giây, dùng cho việc trượt hiển thị hướng dẫn bên biên */
}
/* 链 kết hướng dẫn menuThe liên kết menu hướng dẫn */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Thay đổi màu sắc khi con trỏ chuột đặt trên liên kết điều hướng */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Vị trí và phong cách của nút đóng (góc trên cùng phải) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Đặt phong cách cho nội dung trang - Nếu bạn muốn đẩy nội dung trang sang bên phải khi mở thanh điều hướng, hãy sử dụng thiết lập này. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Thay đổi phong cách của thanh điều hướng bên cạnh trên màn hình nhỏ hơn 450px (giảm khoảng cách nội bộ và kích thước font) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Bước 3 - Thêm JavaScript:

Trong ví dụ dưới đây, thanh điều hướng bên cạnh sẽ trượt vào và độ rộng của nó được đặt là 250px:

Ví dụ về thanh điều hướng bên cạnh che

/* Đặt chiều rộng của thanh điều hướng bên cạnh là 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Đặt chiều rộng của thanh điều hướng bên cạnh là 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Thử ngay

Trong ví dụ dưới đây, thanh điều hướng bên cạnh sẽ trượt vào và đẩy nội dung trang sang phải (giá trị chiều rộng của thanh điều hướng cũng được sử dụng để đặt độ cách của nội dung trang bên trái):

Thanh điều hướng bên cạnh đẩy nội dung

/* Đặt chiều rộng của thanh điều hướng bên cạnh là 250px, độ cách của nội dung trang bên trái là 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Đặt chiều rộng của thanh điều hướng bên cạnh là 0, độ cách của nội dung trang bên trái là 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Thử ngay

Ví dụ dưới đây cũng sẽ làm thanh điều hướng bên cạnh trượt vào và đẩy nội dung trang sang bên phải. Tuy nhiên, lần này, chúng ta thêm một màu nền đen với độ mờ 40% cho phần tử body để "tập trung" vào thanh điều hướng.

Thanh điều hướng bên cạnh có độ mờ đậy đẩy nội dung

/* Đặt chiều rộng của thanh điều hướng bên cạnh là 250px, độ cách của nội dung trang bên trái là 250px, và thêm màu nền đen cho body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Đặt độ rộng thanh điều hướng bên cạnh là 0, độ cách biên trái nội dung trang là 0, và màu nền của body là trắng */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Thử ngay

Trong ví dụ dưới đây, thanh điều hướng sẽ cuộn vào từ bên trái và che phủ toàn bộ trang (độ rộng 100%):

Thanh điều hướng toàn rộng:

/* Mở thanh điều hướng bên cạnh */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* Đóng/ẩn thanh điều hướng bên cạnh */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Thử ngay

Dưới đây là ví dụ về cách mở và đóng thanh điều hướng bên cạnh không có hiệu ứng animation.

Sidenav không có animation

/* Mở thanh điều hướng bên cạnh */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* Đóng/ẩn thanh điều hướng bên cạnh */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

Thử ngay

Dưới đây là ví dụ về cách tạo thanh điều hướng bên phải:

Thanh điều hướng bên phải:

.sidenav {
  right: 0;
}

Thử ngay

Dưới đây là ví dụ về cách tạo một thanh điều hướng bên cạnh hiển thị luôn (vị trí cố định):

Thanh điều hướng bên cạnh hiển thị luôn:

/* Thanh điều hướng bên cạnh */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* Nội dung trang */
.main {
  margin-left: 200px; /* Cùng với độ rộng của thanh điều hướng bên cạnh */
}

Thử ngay

Trang liên quan

Giáo trình:Thanh điều hướng CSS