html+css3+jq滑动的图片和列表二级分类
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<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>
4、初始化css代码。
<style>
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; }
</style>
5、书写css代码。
.indexTypes{width:1002px;margin:10px auto;}
.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;}
6、书写并添加js代码。
<script src="js/jquery.js"></script>
<script>
$(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>
7、代码整体结构。
8、查看效果。
