操作方法
准备好需要用到的图标。
新建html文档。
书写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>
初始化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>
书写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;}
书写并添加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>
代码整体结构。
查看效果。