Thứ tư, ngày 7 tháng 12 năm 2016

jQuery – Tạo Vertical Collapsible Navigation Menu

Ngày đăng: 5/4/2012, 8:44:7PM | Lượt xem: 4,834
Hot!

Trong 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.

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

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.