Menu đa cấp theo kiểu dropdown được sử dụng rất nhiều trong quá trình xây dựng menu website chạy trên nhiều thiết bị có kích thước khác nhau. Trong bài viết này tôi hướng dẫn bạn cách để tạo dropdown menu bằng jquery.
Cơ chế hoạt động của Dropdown menu Jquery
Bên dưới là hình ảnh mô tả cấu trúc của menu. Nó bao gồm menu cấp một và một số có menu con.
Tại vị trí có menu con thì ở menu cha có mũi tên khi click vào nó thì menu con của nó tự động xổ xuống.
Kết quả sau khi click vào icon để xổ menu con của Danh mục 2
Tôi mô tả như vậy chắc bạn hiểu được nó hoạt động như nào rồi đúng không. Bây giờ chúng ta đến cách xây dựng nó.
Xây dựng dropdown menu Jquery
Bước 1: Xây dựng cấu trúc thư mục
Để làm bài này chúng ta cần sử dụng html, css và jquery. Chính vì vậy chúng ta cần xây dựng cấu trúc thư mục như bên dưới.
dropdown-menu-jquery/
├── index.html
├── css/
│ ├── main.css
├── js/
│ ├── app.jsBước 2: Xây dựng cấu trúc html của dropdown menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown menu Jquery</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>Dropdown Menu Jquery</h1>
<ul class="dropdown-menu">
<li><a href="">Danh mục 1</a>
<i class="icon-menu fas fa-chevron-down"></i>
<ul class="sub-menu">
<li><a href="">Danh mục 1.1</a></li>
<li><a href="">Danh mục 1.2</a></li>
<li><a href="">Danh mục 1.3</a></li>
</ul>
</li>
<li><a href="">Danh mục 2</a>
<i class="icon-menu fas fa-chevron-down"></i>
<ul class="sub-menu">
<li><a href="">Danh mục 2.1</a></li>
<li><a href="">Danh mục 2.2</a></li>
<li><a href="">Danh mục 2.3</a></li>
</ul>
</li>
<li><a href="">Danh mục 3</a></li>
<li><a href="">Danh mục 4</a></li>
<li><a href="">Danh mục 5</a>
<i class="icon-menu fas fa-chevron-down"></i>
<ul class="sub-menu">
<li><a href="">Danh mục 5.1</a></li>
<li><a href="">Danh mục 5.2</a></li>
<li><a href="">Danh mục 5.3</a></li>
</ul>
</li>
<li><a href="">Danh mục 6</a></li>
</ul>
</body>
</html>
Trong phần này để sử dụng icon fontawesome và jquery nên chúng ta cần import nó vào.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Bước 3: Code css của Dropdown menu
*{ margin: 0; padding: 0;}
h1 {
padding: 10px 0px;
}
body{
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
font-style: 16px;
}
a{
text-decoration: none;
}
.dropdown-menu{
width: 300px;
background: #2b2b2b;
}
.dropdown-menu .sub-menu{
background: #323232;
display: none;
}
.dropdown-menu li {
position: relative;
}
.dropdown-menu a{
display: block;
padding: 10px 10px;
color: #c3ccce;
border-bottom: 1px solid #3c3b3b;
}
.dropdown-menu a:hover, .dropdown-menu .sub-menu a:hover{
color: #e1f2e3;
}
.dropdown-menu .sub-menu a{
padding-left: 28px;
color: #9b9b9b;
}
.icon-menu{
color: #f5f5f5;
position: absolute;
top: 8px;
right: 10px;
font-size: 14px;
padding: 8px;
cursor: pointer;
}
Bước 4: Code jquery xử lý dropdown menu
$(document).ready(function (){
$('.dropdown-menu .icon-menu').click(function () {
$(this).parent('li').children('.sub-menu').slideToggle();
$(this).toggleClass('fa-chevron-down fa-chevron-right');
});
});
Giải thích: Khi người dùng click vào icon-menu chúng ta cần tìm lên li cấp cha của menu đó bằng phương thức .parent('li') sau đó tiếp tục xuống cấp tìm đến menu con theo phương thức children('sub-menu') và tiến hành thay đổi trạng thái hiển thị hoặc ẩn menu con theo hiệu ứng slideToggle().
Còn nữa, khi menu đã xổ xuống thì hướng mũi tên của icon-menu cũng được thay đổi thông qua qua câu lệnh.
$(this).toggleClass('fa-chevron-down fa-chevron-right');
Như bạn thấy jquery nó rất hay đúng không? Nếu bạn là lần đầu bạn cảm thấy hoang mang khi dùng Jquery bạn có thể nâng cấp kỹ năng của mình bằng chương trình Làm chủ jquery siêu tốc.
Ở trong chương trình này có đầy đủ kiến thức, kinh nghiệm sử dụng jquery vào thực tế mà bất kỳ người nào đi theo nghề lập trình web đều phải có.
Tổng kết
Qua bài viết này tôi đã hướng dẫn bạn cách để tạo ra Dropdown Menu bằng jquery. Nó cực kỳ quan trọng trong việc thiết kế các menu chạy trên đa thiết bị. Ngay bây giờ bạn cần thực hành theo bài hướng dẫn này để nắm chắc bài học.
Xin chào và sớm hẹn gặp lại!
