简洁的JQuery竖导航菜单特效代码

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

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

以下是简洁的JQuery竖导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "#www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="#www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
	<script src="js/jquery-1.2.1.min.js" type="text/javascript"></script>
	<script src="js/menu.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>JQuery</title>
	<!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
   <![endif]-->
</head>
<body>
	<h1>简洁的JQuery竖导航菜</h1>
	<ul id="menu">
		<li>
			<a href="#">Weblog Tools</a>
			<ul>
				<li><a href="#www.pivotx.net/">PivotX</a></li>
				<li><a href="#www.wordpress.org/">WordPress</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Programming Languages</a>
			<ul>
				<li><a href="#www.php.net/">PHP</a></li>
				<li><a href="#www.ruby-lang.org/en/">Ruby</a></li>
				<li><a href="#sc.xueit.com/">Python</a></li>
				<li><a href="#www.perl.org/">PERL</a></li>
				<li><a href="#java.sun.com/">Java</a></li>
				<li><a href="#en.wikipedia.org/wiki/C_Sharp">C#</a></li>
			</ul>
		</li>
		<li><a href="#" target="_blank">xixi (no submenu)</a></li>
		<li>
			<a href="#">Cool Stuff</a>
			<ul>
				<li><a href="#">Apple</a></li>
				<li><a href="#">Maitianquan</a></li>
				<li><a href="#">XBOX360</a></li>
				<li><a href="#">Nifengla</a></li>
				<li><a href="#">Nintendo</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Search Engines</a>
			<ul>
				<li><a href="#search.yahoo.com/">Yahoo!</a></li>
				<li><a href="#www.google.com/">Google</a></li>
				<li><a href="#sc.xueit.com/">Ask.com</a></li>
				<li><a href="#www.live.com/?searchonly=true">Live Search</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>

JS代码(menu-collapsed.js):

/* Simple JQuery Collapsing 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 VliegDownload by http://sc.xueit.comweb:http://www.i-marco.nl/weblog/email:marco@i-marco.nlFree for non-commercial use*/
function initMenu(){
	$('#menu ul').hide();
	$('#menu li a').click( function(){
	$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function(){
	initMenu();
}
);

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.nlDownload by http://sc.xueit.comFree for non-commercial use*/
function initMenu(){
	$('#menu ul').hide();
	$('#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{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;}

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