jQuery菜单滑动伸展收缩特效代码

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

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

以下是 jQuery菜单滑动伸展收缩特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery菜单滑动伸展收缩特效</title>
<link rel="stylesheet" type="text/css" href="css/manhuaDialog.1.0.css">
<link href="http://www.jq-school.com/css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jQuery.Hz2Py-min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<br><br><br>
<body style="background:#ffffff;">
<div class="box_all">
  <div class="box">
    <ul>
      <li> <a href="#">网页设计</a><span>(2810)</span> </li>
      <li> <a href="#">网页软件</a><span>(820)</span> </li>
      <li> <a href="#">图像设计</a><span>(1840)</span> </li>
      <li> <a href="#">网站开发</a><span>(17810)</span> </li>
      <li> <a href="#">网站运营</a><span>(7890)</span> </li>
      <li> <a href="#">建站指南</a><span>(4850)</span> </li>
      <li> <a href="#">数据库</a><span>(15020)</span> </li>
      <li> <a href="#">服务器</a><span>(12120)</span> </li>
      <li> <a href="#">视频教程</a><span>(12120)</span> </li>
      <li> <a href="#">书籍下载</a><span>(12120)</span> </li>
      <li> <a href="#">更多的资源</a><span>(91123)</span> </li>
    </ul>
  </div>
</div>
<div class="boxdown"></div>
</body>
</html>

JS代码(index.js):

$(document).ready(function(){
	var a =$(".box ul li:gt(3):not(:last)");
	a.hide();
	$(".boxdown").click(function(){
	if(a.is(':visible')){
	a.slideUp('fast');
	$(this).removeClass('up');
}
else{
	a.slideDown('fast').show();
	$(this).addClass('up');
}
}
);
}
);

CSS代码(index.css):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
span{color:#FF2B13;}
a{text-decoration:none;color:#515050;}
a:hover{text-decoration:underline;color:red;}
.box_all{overflow:hidden;width:350px;font-family:"微软雅黑";font-size:14px;border:1px solid #EEEEEE;border-top:2px solid #F57A04;padding:0 0 10px 0;margin:0 auto;}
.box{padding-left:45px;padding-top:5px;}
.box li{line-height:20px;margin-right:30px;width:120px;text-align:left;float:left;list-style-type:none;}
.boxdown{cursor:pointer;border:1px solid #EEEEEE;width:60px;height:14px;background:#FFFFFF url(../images/down.png) no-repeat 20px;margin-left:150px;margin-top:-2px;border-top:none;margin:0 auto;}
.up{cursor:pointer;border:1px solid #EEEEEE;width:60px;height:14px;background:#FFFFFF url(../images/up.png) no-repeat 20px;margin-left:150px;margin-top:-2px;border-top:none;margin:0 auto;}

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