Đoạn mã CSS nhẹ này giúp bạn tạo menu dọc tùy chỉnh với menu con khi nhấp vào trong các dự án Bootstrap. Menu dọc này khá tương thích với Bootstrap 3/4/5 CSS và cũng hoạt động khi không có nó. Nó sử dụng chức năng chuyển đổi jQuery để thu gọn menu con trong sự kiện nhấp chuột
Cách tạo Bootstrap Vertical Menu với Submenu
1. Tải CSS jQuery và Bootstrap vào thẻ đầu của trang HTML của bạn. Về cơ bản, Bootstrap CSS là tùy chọn, menu vẫn hoạt động tốt khi không có nó. Dù sao đi nữa, menu sử dụng các lớp màu Bootstrap
2. Sau đó, tạo phần tử điều hướng HTML và sắp xếp các liên kết điều hướng trong danh sách không có thứ tự. Sử dụng danh sách lồng nhau để tạo các menu con sẽ mở khi nhấp chuột
3. Bây giờ, tạo kiểu cho menu bằng cách thêm các kiểu CSS sau vào dự án của bạn
nav {
position: relative;
margin: 50px;
width: 360px;
background:
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Sub Menu */
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
nav ul li a:hover {
background: #1d4f71;
color: #fff;
}
nav ul li a .fa {
width: 16px;
text-align: center;
margin-right: 5px;
float:right;
}
nav ul ul {
background: rgba[0, 0, 0, 0.2];
}
nav ul li ul li a {
border-left: 4px solid transparent;
padding: 10px 20px;
}
nav ul li ul li a:hover {
border-left: 4px solid #3498db;
}
4. Cuối cùng, thêm hàm jQuery sau để bật menu phụ trong sự kiện nhấp chuột
$['.sub-menu ul'].hide[];
$[".sub-menu a"].click[function [] {
$[this].parent[".sub-menu"].children["ul"].slideToggle["100"];
$[this].find[".right"].toggleClass["fa-caret-up fa-caret-down"];
}];
Đó là tất cả. hy vọng bạn đã tạo thành công menu dọc với menu con khi nhấp chuột cho Bootstrap 3/4/5. Nếu bạn có bất kỳ câu hỏi hoặc gợi ý nào, hãy cho tôi biết bằng cách bình luận bên dưới