jquery手风琴折叠菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery手风琴折叠菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的手风琴折叠菜单效果</title>
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
   <![endif]-->
</head>
<body>
	<h1>Simple JQuery Collapsing menu</h1>
	<ul id="menu">
		<li>
			<a href="#">Weblog Tools</a>
			<ul>
				<li><a href="#">PivotX</a></li>
				<li><a href="#">WordPress</a></li>
				<li><a href="#">Textpattern</a></li>
				<li><a href="#">Typo</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Programming Languages</a>
			<ul>
				<li><a href="#">PHP</a></li>
				<li><a href="#">Ruby</a></li>
				<li><a href="#">Python</a></li>
				<li><a href="#">PERL</a></li>
				<li><a href="#">Java</a></li>
				<li><a href="#">C#</a></li>
			</ul>
		</li>
		<li><a href="#">Marco's blog (no submenu)</a></li>
		<li>
			<a href="#">Cool Stuff</a>
			<ul>
				<li><a href="#">Apple</a></li>
				<li><a href="#">Nikon</a></li>
				<li><a href="#">XBOX360</a></li>
				<li><a href="#">Nintendo</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Search Engines</a>
			<ul>
				<li><a href="#">Yahoo!</a></li>
				<li><a href="#">Google</a></li>
				<li><a href="#">Ask.com</a></li>
				<li><a href="#">Live Search</a></li>
			</ul>
		</li>
	</ul><br />
<br />
</body>
</html>

JS代码(menu.js):

/* Simple JQuery Accordion menu. HTML structure to use:<ul id="menu"> <li><a href="#">Sub menu heading</a> <ul> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> ... ... </ul> <li><a href="#">Sub menu heading</a> <ul> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> <li><a href="http://site.com/">Link</a></li> ... ... </ul> ... ... </ul>Copyright 2007 by Marco van Hylckama Vliegweb:http://www.i-marco.nl/weblog/email:marco@i-marco.nlFree for non-commercial use*/
function initMenu(){
	$('#menu ul').hide();
	$('#menu ul').children('.current').parent().show();
	//$('#menu ul:first').show();
	$('#menu li a').click( function(){
	var checkElement = $(this).next();
	if((checkElement.is('ul')) && (checkElement.is(':visible'))){
	return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))){
	$('#menu ul:visible').slideUp('normal');
	checkElement.slideDown('normal');
	return false;
}
}
);
}
$(document).ready(function(){
	initMenu();
}
);

CSS代码(style.css):

body{font-family:Helvetica,Arial,sans-serif;font-size:0.9em;}
p{line-height:1.5em;}
ul#menu,ul#menu ul{list-style-type:none;margin:0;padding:0;width:15em;}
ul#menu a{display:block;text-decoration:none;}
ul#menu li{margin-top:1px;}
ul#menu li a{background:#333;color:#fff;padding:0.5em;}
ul#menu li a:hover{background:#000;}
ul#menu li ul li a{background:#ccc;color:#000;padding-left:20px;}
ul#menu li ul li a:hover,ul#menu li ul .current a{background:#aaa;border-left:5px #000 solid;padding-left:15px;}
.code{border:1px solid #ccc;list-style-type:decimal-leading-zero;padding:5px;margin:0;}
.code code{display:block;padding:3px;margin-bottom:0;}
.code li{background:#ddd;border:1px solid #ccc;margin:0 0 2px 2.2em;}
.indent1{padding-left:1em;}
.indent2{padding-left:2em;}

附件:下载该文件资源,减少时间成本(增值服务)