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="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;}

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"����","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#000;text-decoration:none}
a:hover{color:#341b00;text-decoration:underline;}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
img{max-width:100%;}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word;color:#666;}
/*ͨ�ö���*/
.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
.fl{float:left;}
.fr{float:right;}
.space0{clear:both;height:0;display:block;font-size:1px;overflow:hidden;}
.space5{clear:both;height:5px;display:block;font-size:1px;overflow:hidden;}
.space10{clear:both;height:10px;display:block;font-size:1px;overflow:hidden;}
.space15{clear:both;height:15px;display:block;font-size:1px;overflow:hidden;}
.space20{clear:both;height:20px;display:block;font-size:1px;overflow:hidden;}
.space25{clear:both;height:25px;display:block;font-size:1px;overflow:hidden;}
.space30{clear:both;height:30px;display:block;font-size:1px;overflow:hidden;}
.space35{clear:both;height:35px;display:block;font-size:1px;overflow:hidden;}
.space50{clear:both;height:50px;display:block;font-size:1px;overflow:hidden;}
.space80{clear:both;height:80px;display:block;font-size:1px;overflow:hidden;}
.rela{position:relative;}
.content,.layout{width:1000px;margin:0 auto;position:relative;}
.boxMo{width:100%;min-width:1000px;}
.banner{height:125px;background:url(/skin8/images/banner.jpg) no-repeat top center;}
.search{float:left;width:174px;height:27px;position:relative;background-color:#fff;}
.search .search_text{position:absolute;left:20px;top:1px;width:120px;height:26px;font:12px/26px "΢���ź�";color:#888;border:0;}
.search .submit{position:absolute;top:1px;right:10px;width:18px;height:26px;background:url(/skin8/images/sub-btn.jpg) no-repeat 0 0;border:0;cursor:pointer;}
.banner a{float:left;font:12px/26px "΢���ź�";color:#fff;}
.a2{padding:0px 13px;margin-left:10px;_margin-left:8px;}
.borRad{border:1px solid #e5e5e5;border-radius:14px;}
.banner_item{padding:50px 0 0 660px;}
.h_lSide,.layout_lSide{width:640px;float:left;}
.layout_rSide{width:300px;float:right;}
.h_rSide{width:300px;height:427px;padding:0 20px 0 40px;float:right;background:url(/skin8/images/head_r_bg.jpg) no-repeat top center;}
.headLine_i img{width:640px;height:427px;}
.headLine_h{height:84px;padding-top:27px;font:bold 26px/42px "Microsoft Yahei";overflow:hidden;}
.headLine_h a{color:#000;}
.headLine_abs{height:168px;margin-top:40px;font:14px/24px "Microsoft Yahei";color:#333;}
.headLine_abs a{color:#f76a00;}
.headLine_pbt{margin-top:60px;font-size:14px;line-height:14px;color:#8e8e8e;}
.newsList{width:640px;background:url(/skin8/images/newslist_bg.jpg) repeat-y top center;border-bottom:1px solid #e0e0e0;}
.newsList li{width:260px;height:364px;padding:0 30px;float:left;}
.nL_i img{display:block;width:260px;height:173px;margin:19px auto 0;}
.nL_title{height:52px;margin-top:10px;font:bold 18px/26px "Microsoft Yahei";text-align:center;overflow:hidden;}
.nL_title a{color:#000;}
.nL_abs{margin:10px 0 10px;font:14px/20px "Microsoft Yahei";color:#888;}
.share_txt{line-height:28px;}
#displaypagenum{padding:20px 0;}
#displaypagenum span{font-size:18px;color:#ff3300;padding:3px 12px;margin:0 5px;}
#displaypagenum a{padding:5px 12px;font-size:16px;color:#a0a0a0;display:inline-block;background:#fff;margin:5px 5px;border:1px solid #d2d2d2;font-family:"Microsoft Yahei"}
#displaypagenum a:hover{text-decoration:none;border-color:#cc0000;color:#cc0000;}
.top10 .top_t{}
.t_mo{height:40px;font:22px/40px "Microsoft Yahei";text-indent:0.5em;background-color:#eeeeef;border-bottom:1px solid #ccc;color:#bd1c24;}
.tt li{padding:0 10px;height:18px;margin-bottom:16px;background:none;font:14px/18px "΢���ź�";color:#fff;overflow:hidden;}
.tt li span{background-color:#999;width:20px;height:18px;text-align:center;margin-right:8px;display:inline-block;}
.tt li .color01{background-color:#f76a00}
.ducheng_t{display:block;width:72px;height:40px;margin-left:10px;background:url(/skin8/images/dc.jpg) no-repeat top center;}
.ducheng_list li{position:relative;height:34px;font:14px/34px "����";overflow:hidden;}
.ducheng_list li a{padding-left:20px;color:#000;}
.ducheng_list li .dot1{position:absolute;top:15px;left:10px;width:2px;height:3px;}
.tuku_list li{float:left;width:134px;margin:18px 4px 0 12px;}
.tuku_list li img{width:140px;height:105px;}
.tuku_list li h3{margin-top:5px;height:40px;font:12px/20px "����";text-align:center;overflow:hidden;}
.yaowen_list li{position:relative;height:38px;font:12px/38px "����";overflow:hidden;}
.yaowen_list li .dot2{position:absolute;top:17px;left:0px;width:4px;height:3px;}
.yaowen_list li a{padding-left:10px;color:#000;}
/*������*/
.jygs{width:220px;margin:0 auto;}
.jygs h2 a{display:block;width:220px;height:60px;background:url(/skin8/images/ycwb-2015index.png) no-repeat 0 -257px;}
.imgN{text-align:center;margin-bottom:15px;height:133px;}
.imgN img{width:200px;height:114px;}
.imgN h3{width:200px;height:14px;font:12px/14px "΢���ź�";margin:5px auto 0;color:#444;text-align:center;overflow:hidden;}
.imgN2 li span{position:absolute;top:8px;left:0px;padding:0 6px;font:12px/20px "����";color:#fff;background-color:#e25e27;}
.imgN2 li span a{color:#fff;}
.imgN2 li span a:hover{color:#fff;text-decoration:none;}
.imgN2 li span:hover{background-color:#be0900;}
.imgN2{position:relative;margin-top:20px;*height:118px;}
.imgN2 li{position:relative;float:left;margin-left:10px;*display:inline;}
.imgN2 li img{width:93px;height:70px;}
.imgN2 li h3{width:93px;height:40px;font:12px/20px "����";color:#444;overflow:hidden;text-align:center;}
.imgN2 li .lC{position:absolute;top:5px;left:-10px;}
.imgN2 li .rC{position:absolute;top:5px;right:-15px;left:auto;}
/*���԰�*/
.lyb{width:100%;padding-bottom:30px;background-color:#eee;}
.lyb_t{width:1000px;height:60px;margin:0 auto;background:url(/skin8/images/lyb_t.jpg) no-repeat top center;}
/*��ά��*/
.ewm{width:300px;height:181px;}
.marT20{margin-top:20px;}
.fx_des{color:#f76a00}

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