Cách tạo: Menu ngoài canvas

Tạo menu ngoài canvas

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 bất kỳ phần tử nào để mở thanh điều hướng -->
<span onclick="openNav()">open</span>
<!-- Nếu bạn muốn thanh điều hướng bên cạnh đẩy nội dung trang sang phải, hãy thêm tất cả nội dung trang vào div này (nếu chỉ muốn thanh điều hướng ở trên cùng của trang, thì không cần thiết phải sử dụng cài đặt này) -->
<div id="main">
  ...
</div>

Bước 2 - Thêm CSS:

/* Menu điều hướng bên cạnh */
.sidenav {
  height: 100%; /* 100% chiều cao */
  width: 0; /* 0 chiều rộng - thay đổi cài đặt này bằng JavaScript */
  position: fixed; /* Giữ nguyên vị trí */
  z-index: 1; /* Trên cùng */
  top: 0;
  left: 0;
  background-color: #111; /* Màu đen */
  overflow-x: hidden; /* Tắt cuộn ngang */
  padding-top: 60px; /* Nội dung cách trên cùng 60 pixel */
  transition: 0.5s; /* Hiệu ứng chuyển đổi 0.5 giây, làm cho thanh điều hướng bên cạnh cuộn vào */
}
/* Liên kết trong menu điều hướng */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Khi bạn di chuột qua liên kết điều hướng, thay đổi màu sắc của nó */
.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 khi mở thanh điều hướng bên cạnh, đẩy nội dung trang sang phải, hãy sử dụng tùy chọn này */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Trên màn hình có độ cao dưới 450 pixel, thay đổi phong cách của thanh điều hướng bên cạnh (giảm khoảng cách trong và cỡ chữ) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Bước 3 - Thêm JavaScript:

Menu ngoài khung vẽ

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

Thử ngay

Ví dụ sau cũng sẽ cuộn thanh điều hướng bên cạnh vào và đẩy nội dung trang sang phải. Tuy nhiên, lần này chúng ta thêm một màu nền đen semi-transparent (40% không trong suốt) cho phần tử body để "tập trung" thanh điều hướng bên cạnh:

Menu ngoài khung vẽ có độ trong suốt

/* Đặt độ rộng của thanh điều hướng bên cạnh là 250px, khoảng cách bên trái của nội dung trang 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 của thanh điều hướng bên cạnh là 0, khoảng cách bên trái của 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

Trang liên quan

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