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>
<link type="text/css"  rel="stylesheet" href="css/base.css" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>

<div class="indexTypes">
   <ul>
	   <li class="current">
		   <div class="title">
			   <h2>产品分类</h2>
			   <a href="">****系列</a>
		   </div>
		   <div class="con fl" id="con11">
			   <ul>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
			   </ul>
		   </div>
	   </li>
	   <li>
		   <div class="title">
			   <h2>产品分类</h2>
			   <a href="">****系列</a>
		   </div>
		   <div class="con fl" id="con22">
			   <ul>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
			   </ul>
		   </div>
	   </li>
	   <li>
		   <div class="title">
			   <h2>产品分类</h2>
			   <a href="">*****系列</a>
		   </div>
		   <div class="con fl" id="con33">
			   <ul>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
				   <li><a href="">产品分类名称</a></li>
			   </ul>
		   </div>
	   </li>
	   <div class="clear"></div>
   </ul>
</div>
       
<script type="text/javascript">
$(document).ready(function(e) {

	var currentLi =  $(".indexTypes ul li");
	$(currentLi.eq(0)).stop().animate({"width":"510px"},600);
	$(currentLi.eq(0)).children(".con").animate({"left":"193px"},600);
	
	$(currentLi).hover(function(e){
		$(this).siblings("li").stop().animate({"width":"193px"},600);
		$(this).siblings("li").removeClass("current");
		$(this).addClass("current");
		$(this).stop().animate({"width":"510px"},600);  
	});
	
});
</script>
</body>
</html>

CSS代码(base.css):

@charset "utf-8";/* CSS Document */
html,body{font-size:12px;color:#333;font-family:"宋体";}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe,label{margin:0px;padding:0px;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,abbr,acronym{border:none;}
ol,ul,li{list-style:none;}
img{border:0;}
acption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,qafter{content:'';}
a{color:#333;text-decoration:none;outline:none;}
a:hover{text-decoration:none;}
/*通用文字颜色,大小等等*/
.f11{font-size:11px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.f22{font-size:20px;}
.f24{font-size:20px;}
.f26{font-size:26px;}
.f30{font-size:30px;}
.f40{font-size:40px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.lh120{line-height:120%;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.c333{color:#333;}
.c666{color:#666;}
.c777{color:#777;}
.c999{color:#999;}
.ccc{color:#ccc;}
.cfff{color:#FFF;}
.red{color:#FF0064;}
.blue{color:#0681AE;}
.green{color:#090;}
.bcFFF{background-color:#FFF;}
.bn{border:none;}
/*定位*/
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-right:auto;margin-left:auto;}
.oh{overflow:hidden;}
.fl{float:left;display:inline;}
.clear{clear:both;}
.clearfix{display:inline-block;}
.fr{float:right;display:inline;}
.vm{vertical-align:middle;}
.none{display:none;}
.block{display:block;}
.inline{display:inline;}

CSS代码(main.css):

@charset "utf-8";/* CSS Document */
body{font-family:"宋体";color:#333;background-color:#B6C6CF;width:100%;/*box-sizing:border-box;overflow:visible!important;*/
}
/*首页主题内容*/
.indexTypes{width:1002px;margin:10px auto;/*border:1px solid #f00;*/
}
.indexTypes ul li{position:relative;float:left;width:193px;overflow:hidden;height:113px;overflow:hidden;}
.indexTypes ul li:hover{cursor:pointer;}
.indexTypes ul li.currnet{width:510px;}
.indexTypes ul li .title{width:143px;padding-top:30px;padding-left:50px;background:url(../images/typeBg.png) repeat-x;font-size:18px;color:#fff;font-family:"微软雅黑";height:83px;float:left;}
.indexTypes ul li .title a{color:#fff;}
.indexTypes ul li .title h2{font-size:20px;font-weight:bold;padding-bottom:5px;}
.indexTypes ul li.current .title{background:url(../images/typeT.jpg) no-repeat left top;}
.indexTypes ul li .con{position:absolute;top:0;width:317px;left:193px;background:url(../images/typeUl.jpg) no-repeat left top;overflow:hidden;height:113px;overflow:hidden;}
.indexTypes ul li #con11{background:url(../images/typeUl.jpg) no-repeat left top;}
.indexTypes ul li #con22{background:url(../images/con22.jpg) no-repeat left top;}
.indexTypes ul li #con33{background:url(../images/con33.jpg) no-repeat left top;}
.indexTypes ul li .con ul{padding-top:12px;}
.indexTypes ul li .con ul li{float:none;height:auto;width:auto;}
.indexTypes ul li .con ul li a{line-height:28px;width:195px;display:block;text-indent:3em;background:url(../images/typesLi.jpg) no-repeat 6px 7px;border-bottom:1px dashed #d1d1d1;}
.indexTypes ul li .con ul li a:hover{color:#F87C02;}

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