Bài 28: Offcanvas trong Bootstrap 5
Offcanvas hay menu trượt ngang có thể dễ dàng tạo trong Bootstrap 5. Dưới đây là cách làm menu ngang hay Offcanvas bằng Bootstrap 5.
Offcanvas là gì?
Offcanvas tương tự như modal (mặc định bị ẩn và hiện khi được kích hoạt), ngoại trừ việc nó thường được dùng làm menu điều hướng cho thanh bên cạnh màn hình.
Cách tạo một menu trượt ngang cho sidebar trong Bootstrap 5
Code mẫu sau hiển thị cách tạo một sidebar dạng menu trượt ngang:
Offcanvas<!-- Offcanvas Sidebar -->
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<!-- Button to open the offcanvas sidebar -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
Giải thích chi tiết:
Class .offcanvas
tạo sidebar dạng menu trượt ngang.
Class .offcanvas-start
xác định vị trí của menu trượt ngang, cho nó độ rộng 400px.
Class .offcanvas-title
đảm bảo căn lề và chiều cao dòng phù hợp.
Sau đó, thêm nội dung bên trong class .offcanvas-body
.
Để mở sidebar menu trượt ngang, bạn phải dùng một <button>
hoặc phần tử <a>
trỏ tới ID của container .offcanvas
(#demo ở trong ví dụ).
Để mở sidebar offcanvas
với phần tử <a>
, bạn có thể trỏ tới #demo
cùng thuộc tính href
, thay cho data-bs-target
.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Menu QuanTriMang.com</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Công nghệ.</p>
<p>Đời sống.</p>
<p>Khoa học.</p>
<button class="btn btn-secondary" type="button">Nút bấm</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Sidebar trượt ngang</h3>
<p>Offcanvas tương tự như modal, ngoại trừ việc nó thường được dùng làm sidebar.</p>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Mở menu trượt ngang
</button>
</div>
</body>
</html>
Vị trí Offcanvas
Dùng .offcanvas-start|end|top|bottom
để xác định vị trí của menu trượt ngang nằm bên trái, phải, trên hoặc dưới:
Code mẫu vị trí Offcanvas:
Bên phải: <div class="offcanvas offcanvas-end" id="demo">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-end" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Menu Quantrimang.com</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Công nghệ.</p>
<p>Đời sống.</p>
<p>Xã hội.</p>
<button class="btn btn-secondary" type="button">Nút bấm</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas bên phải</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Bật menu trượt bên phải
</button>
</div>
</body>
</html>
Phía trên: <div class="offcanvas offcanvas-top" id="demo">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-top" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Quantrimang.com</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Kênh thông tin công nghệ mới nhất.</p>
<button class="btn btn-secondary" type="button">Nút bấm</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas phía trên</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Nút mở menu trượt phía trên
</button>
</div>
</body>
</html>
Phía dưới: <div class="offcanvas offcanvas-bottom" id="demo">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-bottom" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Quantrimang.com</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Kênh thông tin công nghệ hàng đầu.</p>
<button class="btn btn-secondary" type="button">Nút bấm</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Offcanvas phía dưới</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Nút bật menu trượt ngang
</button>
</div>
</body>
</html>
Menu trượt ngang theo kích thước màn hình
Bạn cũng có thể kiểm soát thời điểm muốn ẩn hoặc hiện menu offcanvas trên các độ rộng màn hình khác nhau, với class .offcanvas-sm|md|lg|xl|xxl
:
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Menu Quantrimang.com</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Công nghệ</p>
<p>Đời sống</p>
<p>Khoa học</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Menu trượt ngang theo kích thước màn hình</h3>
<p>Ví dụ này ẩn menu trượt ngang trên màn hình có độ rộng lớn hơn 991px. Nút bấm mở offcanvas nà cũng bị ẩn(d-lg-none).</p>
<p class="text-bg-danger">Chỉnh lại kích thước cửa sổ trình duyệt để thấy kết quả.</p>
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Mở sidbar offcanvas
</button>
</div>
</body>
</html>
Menu trượt ngang nền tối
Dùng class .text-bg-dark
để tạo một menu trượt ngang nền tối.
Mẹo: Code mẫu đã thêm class .btn-close-white
vào .btn-close
để tạo một nút đóng màu trắng nhằm khiến nó nổi bật trên nền tối:
<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="offcanvas offcanvas-start text-bg-dark" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Menu Quantrimang.com</h1>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Công nghệ</p>
<p>Download</p>
<p>Học CNTT</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>
<div class="container-fluid mt-3">
<h3>Sidebar menu nền tối</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Mở menu trượt ngang nền tối
</button>
</div>
</body>
</html>
Trên đây là mọi điều bạn cần biết về cách cách tạo menu trượt ngang hay Offcanvas trong Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 27: Scrollspy trong Bootstrap 5
-
Bài 23: Modal trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 25: Popover trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 5: Màu sắc trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 26: Toast trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2 -
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1 -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
Cách khóa trang cá nhân Facebook không cho người lạ xem
Hôm qua 2 -
Tổng hợp các cách bật Bluetooth trên Windows 10/8/7
Hôm qua -
Một số cách sửa lỗi Start Menu trên Windows 10 ngừng hoạt động
Hôm qua 5 -
Lệnh ALTER TABLE trong SQL Server
Hôm qua -
Cách vô hiệu hóa Facebook nhưng vẫn dùng Messenger
Hôm qua -
6 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3