Xây dựng menu Dropdown với jQuery - jQuery Tutorials
Trong bài hôm nay tôi sẽ hướng dẫn các bạn áp dụng jquery để tạo ra dropdow menu, tức là khi chúng ta click vào menu cha thì nó sẽ đổ ra menu con. Tất nhiên khi chúng ta click vào một lần nữa thì lập tức nó sẽ cuộn lại tất cả những menu con ấy. Và khi các bạn click vào menu ...
Trong bài hôm nay tôi sẽ hướng dẫn các bạn áp dụng jquery để tạo ra dropdow menu, tức là khi chúng ta click vào menu cha thì nó sẽ đổ ra menu con. Tất nhiên khi chúng ta click vào một lần nữa thì lập tức nó sẽ cuộn lại tất cả những menu con ấy. Và khi các bạn click vào menu nào đó thì lập tức các menu cha khác sẽ phải đóng lại. Để có thể tiếp thu bài này tốt hơn thì các bạn cần phải có chút ít kiến thức về jquery.
1. Xây dựng cấu trúc HTML menu dropdow
Để giải quyết bài toán này, tôi sẽ tiến hành làm theo thứ tự như sau: Do nó chỉ là 1 file html mà thôi nên ngay ngoài desktop tôi tạo file menu.html. Làm việc với menu thì các bạn cũng hiểu là chúng ta sẽ phải đụng chạm đến các thẻ ul & li. Và sau đây là nội dung của file menu.html của chúng ta.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zaidap.com.net - Menu Dropdow Use CSS & JQUERY</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*VIẾT CSS TẠI ĐÂY*/
</style>
<script language="javascript">
/*VIẾT JAVASCRIPT TẠI ĐÂY*/
</script>
</head>
<body>
<ul>
<li><a href="#">Home</a>
<div class="submenu">
<ul>
<li><a href="#">About US</a></li>
<li><a href="#">Sale Off</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</li>
<li><a href="#">Promotion</a>
<div class="submenu">
<ul>
<li><a href="#">Money</a></li>
<li><a href="#">Hot Deal</a></li>
<li><a href="#">Chewry Junior</a></li>
</ul>
</div>
</li>
<li><a href="#">Product</a>
<div class="submenu">
<ul>
<li><a href="#">Product Random</a></li>
<li><a href="#">New Product</a></li>
<li><a href="#">Febtured Product</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
Các bước tiếp theo chúng ta sẽ viết CSS vào vị trí thẻ style và viết Javascript vào vị trí the script nhé các bạn.
Và đây là giao diện chạy lên:
Kết quả như hình xem như xây dựng thành công cấu trúc HTML rồi đấy. Bây giờ ta sẽ thực hiện các bước sau để xây dựng menu dropdown.
Bước 1: Tạo CSS ẩn menu con
Tiếp theo chúng ta sẽ ẩn tất cả các thẻ div.submenu bởi vì nó chỉ hiển thị khi chúng ta click vào menu cha của.
ul li .submenu{ display: none;}Bước 2: Thêm class selected để xác định menu hiển thị
Chúng ta sẽ dựa vào class selected để biết mà hiển thị menu con tương ứng, mà menu con ở đây là div.submenu nên class của chúng ta sẽ như sau:
ul li.selected .submenu{ display: block;}Ban đâu class này sẽ không được thêm vào mà chỉ khi nào click vào menu thì ta sử dụng jQuery để thêm vào.
Bước 3: Style cho menu đẹp hơn
Tiếp theo chúng ta cần style cho menu đẹp hơn bằng đoạn mã CSS sau:
ul li{ list-style-type: none;}
a{ text-decoration: none;}
ul a{ display: block; width: 125px; background: orange; border-bottom: 1px solid #ccc; padding-left: 25px; line-height: 30px; color: white;}
.submenu ul{ margin: 0px; padding: 0px;}
.submenu ul a{ background: blue;}
.submenu ul a:hover{ background: silver;}
Và đây là giao diện tại bước này:
Bước 4: Sư dụng jQuery để viết cho sự kiện click
Tại bước này bạn có một số lưu ý sau:
- Thứ nhất: Chúng ta thêm sự kiện click cho các thẻ
acấp đầu tiên nên selector của chúng ta sẽ có dạngul li > a. - Thứ hai: Khi click vào thẻ
aở phần thứ nhất thì chúng ta sẽ thêm classselectedvào thẻlicha của theađang click, lúc này các menu con sẽ hiển thị ra. Nhưng trước khi thêm classselectedthì bạn phải chắc chắn rằng đã xóa classselectedở các thẻ li khác bởi vì mình muốn chỉ có thẻ li hiện tại được xổ ra.
Code jQuery như sau:
$(document).ready(function() {
$("ul li a").click(function()
{
var li = $(this).parent();
// Kiểm tra có phải click vào menu đã active ko
// nếu phải thì ko làm gì, ngược lại sẽ xử lý xổ menu con ra
if (li.hasClass("selected")) {
return false;
}
else {
// Xóa class selected khỏi các thẻ li khác
$('ul li').removeClass('selected');
// Thêm class selected vào thẻ li hiện tại
li.addClass("selected");
}
// return false nghĩa là cho trang đứng im
return false;
});
});Và đây là Full Code: XEM DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zaidap.com.net - Menu Dropdow Use CSS & JQUERY</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
/*VIẾT CSS TẠI ĐÂY*/
ul li{ list-style-type: none;}
a{ text-decoration: none;}
ul a{ display: block; width: 125px; background: orange; border-bottom: 1px solid #ccc; padding-left: 25px; line-height: 30px; color: white;}
ul li .submenu{ display: none;}
ul li.selected .submenu{ display: block;}
.submenu ul{ margin: 0px; padding: 0px;}
.submenu ul a{ background: blue;}
.submenu ul a:hover{ background: silver;}
</style>
<script language="javascript">
/*VIẾT JAVASCRIPT TẠI ĐÂY*/
$(document).ready(function() {
$("ul li a").click(function()
{
var li = $(this).parent();
// Kiểm tra có phải click vào menu đã active ko
// nếu phải thì ko làm gì, ngược lại sẽ xử lý xổ menu con ra
if (li.hasClass("selected")) {
return false;
}
else {
// Xóa class selected khỏi các thẻ li khác
$('ul li').removeClass('selected');
// Thêm class selected vào thẻ li hiện tại
li.addClass("selected");
}
// return false nghĩa là cho trang đứng im
return false;
});
});
</script>
</head>
<body>
<ul>
<li><a href="#">Home</a>
<div class="submenu">
<ul>
<li><a href="#">About US</a></li>
<li><a href="#">Sale Off</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</li>
<li><a href="#">Promotion</a>
<div class="submenu">
<ul>
<li><a href="#">Money</a></li>
<li><a href="#">Hot Deal</a></li>
<li><a href="#">Chewry Junior</a></li>
</ul>
</div>
</li>
<li><a href="#">Product</a>
<div class="submenu">
<ul>
<li><a href="#">Product Random</a></li>
<li><a href="#">New Product</a></li>
<li><a href="#">Febtured Product</a></li>
</ul>
</div>
</li>
</ul>
</body>
</html>
2. Lời kết
Vấn đề quan trọng của bài này là hiểu ý tưởng sử dụng class selected để hiển thị menu con. Thứ hai nữa là hiểu được các hàm có sẵn trong jQuery như hàm addClass, removeClass, đồng thời biết cách áp dụng nó vào bài toán cụ thể.
