jQuery – Tạo Vertical Collapsible Navigation Menu

jQuery - Auto Collapsible Navigation MenuTrong ví dụ này tôi sẽ tạo một menu đứng đơn giản bằng cách kết hợp CSS và phương thức/ hiệu ứng slideToggle() của jQuery. Kiểu thiết kế được dựa trên menu của trang codeproject.com.

Cơ bản

Menu này được thiết kế bởi nhiều mục, mỗi mục là một cặp thẻ <a> và <ul> xếp cạnh nhau. Trong đó <a> được dùng làm header của mỗi mục và khi bạn click vào header này, phần nội dung của nó sẽ ẩn/hiện tùy theo trạng thái hiện tại.

Phần mã javascript rất đơn giản, chỉ cần gọi phương thức slideToggle() cho phần tử <ul> nằm kế tiếp phần tử <a> được click. Ta lấy phần tử này bằng cách dùng phương thức next().
HTML:

<div id="menu">
	<a href="#">Web Development</a>
	<ul>
		<li>Ajax</li>
		<li>ASP.NET</li>
		<li>HTML / CSS</li>
		<li>PHP</li>
	</ul>

	<a href="#">Mobile Development</a>
	<ul>
		<li>iPhone</li>
		<li>Android</li>
		<li>Windows Mobile</li>
		<li>Palm and WebOS</li>
	</ul>

	<a href="#">Multimedia</a>
	<ul>
		<li>DirectX</li>
		<li>GDI+</li>
		<li>OpenGL</li>
	</ul>
</div>

CSS:

#menu{
	font: 14px arial, verdana, sans-serif;
	width: 12em;
	background: #fe9900;
	border-color: #fe9900;
	border-width: 1px;
	border-style: solid;
}
#menu ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu li{
	display: block;
	padding: 2px 3px;
	background: #fff8de;
	cursor: pointer;
}
#menu li:hover{
	background: #ffcc66;
}

#menu a {
	font-weight: bold;
	display: block;
	border: 1px solid #fe9900;
	padding: 2px 3px;
	background: #ffcc66;
	text-decoration: none;
}

Javascript:

$(document).ready(function(){
	$('#menu a').click(function(){
		$(this).next().slideToggle();
	});
});

Kết quả:

jQuery - Vertical Side Menu Basic

Tự động đóng các mục không sử dụng

Trong codeproject ta có thể thấy các mục menu sẽ được tự động đóng lại và chỉ xổ ra mục được click chọn. Vì vậy cần bổ sung thêm một phương thức mới để làm điều này. Tôi đặt tên phương thức là collapseAll(). Phương thức này nhận vào một tham số callback để thực hiện một công việc nào đó sau khi đã đóng toàn bộ các mục menu:

function collapseAll(callback){
	var elements=$("#menu ul:visible");

	if(elements.length)
		elements.slideToggle("fast",callback);
	else
		if(typeof callback == "function")
			callback();
}

Trong phương thức trên, nếu mảng elements không trả về phần tử nào, phương thức slideToggle() sẽ không được thực thi. Do đó để đảm bảo phương thức callback được thực thi, tôi sử dụng if else để gọi thủ công callback().
Như vậy, tôi sửa lại các mã javascript ban đầu thành:

$(document).ready(function(){
	collapseAll();
	$('#menu a').click(function(){
		var self=$(this);
		collapseAll(function(){
			self.next().slideToggle("fast");
		});
	});
});

Kết quả:
jQuery - Auto Collapsible Navigation Menu

Mã nguồn hoàn chỉnh

 

Nếu bạn gặp rắc rối khi làm ví dụ này, có thể tham khảo mã nguồn hoàn chỉnh HTML sau:

<html>
	<head>
	<title>A Simple Verical Navigation Menu</title>
	<style>
		#menu{
			font: 14px arial, verdana, sans-serif;
			width: 12em;
			background: #fe9900;
			border-color: #fe9900;
			border-width: 1px;
			border-style: solid;
		}
		#menu ul{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#menu li{
			display: block;
			padding: 2px 3px;
			background: #fff8de;
			cursor: pointer;
		}
		#menu li:hover{
			background: #ffcc66;
		}

		#menu a {
			font-weight: bold;
			display: block;
			border: 1px solid #fe9900;
			padding: 2px 3px;
			background: #ffcc66;
			text-decoration: none;
		}
	</style>

	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			collapseAll();
			$('#menu a').click(function(){
				var self=$(this);
				collapseAll(function(){
					self.next().slideToggle("fast");
				});
			});
		});
		function collapseAll(callback){
			var elements=$("#menu ul:visible");

			if(elements.length)
				elements.slideToggle("fast",callback);
			else
				if(typeof callback == "function")
					callback();
		}
	</script>
</head>
	<body>
<div id="menu">
	<a href="#">Web Development</a>
	<ul>
		<li>Ajax</li>
		<li>ASP.NET</li>
		<li>HTML / CSS</li>
		<li>PHP</li>
	</ul>

	<a href="#">Mobile Development</a>
	<ul>
		<li>iPhone</li>
		<li>Android</li>
		<li>Windows Mobile</li>
		<li>Palm and WebOS</li>
	</ul>

	<a href="#">Multimedia</a>
	<ul>
		<li>DirectX</li>
		<li>GDI+</li>
		<li>OpenGL</li>
	</ul>
</div>
	</body>
</html>

YinYang’s Programming Blog

Advertisements

One thought on “jQuery – Tạo Vertical Collapsible Navigation Menu

  1. Pingback: jQuery – Tạo Vertical Collapsible Navigation Menu | TAN TAI

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s