jquery竖直收缩导航菜单特效代码

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

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

以下是 jquery竖直收缩导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
<title>jquery竖直收缩导航菜单</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>

<style type="text/css">
*{padding:0;margin:0;outline:none;}
body{font-family:'MicroSoft Yahei',verdana,arial,tahoma;font-size:12px;color:#333;-webkit-text-size-adjust: none;}
ul,ol,li{list-style:none}
a{text-decoration:none;word-wrap:break-word;outline:none;hide-focus:expression(this.hideFocus=true);transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;}
a:hover{text-decoration:none;}

/* lanmu-content */
.lanmu-content{width:160px;margin:40px auto 0 auto;}
.lanmu-content .listmore{display:block;text-align:center;height:25px;border-top:0;background:#eee;color:#1594d1;font:normal 12px/25px Tahoma,Verdana;}
.lanmu-list{display:block;}
.lanmu-list dt{display:block;height:40px;background:#0066CC;font:bold 14px/40px "宋体"; color:#fff;padding-left:10px;}
.lanmu-list dd{padding-top:2px;}
.lanmu-list dd a{display:block;height:33px;background:#f9f9f9;border-bottom:1px solid #eee;border-top:2px solid #fff;border-left:2px solid #999;border-right:1px solid #eee;font:normal 12px/33px Georgia "宋体"; color:#adadad;padding-left:25px; line-height: 33px;}
.lanmu-list dd a:hover{padding-left:35px;}
.lanmu-list dd a:hover,.lanmu-list dd a.current{border-left:2px solid #1160ba;background-color:#f6f6f6;color:#1160ba;font-weight:bold;}
</style>

<div class="lanmu-content">
	<dl class="lanmu-list">
		<dt>JS特效代码分类</dt>
		<dd><a href='#' class='current'>焦点幻灯</a></dd>
		<dd><a href='#'>触屏特效</a></dd>
		<dd><a href='#'>相册特效</a></dd>
		<dd><a href='#'>图片特效</a></dd>
		<dd><a href='#'>文字特效</a></dd>
		<dd><a href='#'>窗口图层</a></dd>
		<dd><a href='#'>表格表单</a></dd>
		<dd><a href='#'>HTML5/CSS3</a></dd>
		<dd><a href='#'>其他代码</a></dd>
	</dl>
	<a class="listmore" style="display:none;" href="javascript:;">查看更多 ↓</a>
</div>


<script type="text/javascript">
var LanMu = $(".lanmu-list");
var lanMuSun = LanMu.children('dd');
if((lanMuSun.size()) > 8){
	LanMu.children("dd:gt(5)").hide();
	$(".listmore").show();
}
$(".listmore").bind("click", function(){
   if(!$(".listmore").hasClass('ListMoreOn')){
	   $(".listmore").addClass('ListMoreOn');
	   LanMu.children("dd:gt(5)").slideDown();
		$(".listmore").html("折叠栏目 ↑")
   }else{
		$(".listmore").removeClass('ListMoreOn');
		LanMu.children("dd:gt(5)").slideUp();
		$(".listmore").html("查看更多 ↓");

   }
})
</script>
</body>
</html>

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