标签：
效果图:
素材图片:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .navlist { position: absolute; top: 10px; } a { text-decoration: none; color: White; } .navlist a { margin-left: 60px; color: #666; } .expand { height: 0px; background-color: #333d4d; overflow: hidden; position: relative; top: 30px; width: 100%; } .expdiv { height: 130px; width: 500%; } .expdiv-list { width: 20%; text-align: center; float: left; line-height: 110px; color: White; } .expand .close-btn { width: 120px; height: 20px; background: url(http://img.mukewang.com/5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px; position: absolute; left: 50%; bottom: -2px; margin-left: -60px; cursor: pointer; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#menuList").on("click", "a", function() { // 判断当前单击的对象是否被激活，则关闭展区 if ($(this).hasClass("btn-active")) { $("#expandZone #closeBtn").click(); return false; } // 获取当前单击的索引，并获取相应的位置 var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%"; if ($("#expandZone").hasClass("active")) { // 给expdiv类元素赋予动画切换的效果 $("#expandZone .expdiv").animate({ marginLeft: mlValue }); } else { $("#expandZone .expdiv").css({ marginLeft: mlValue }); $("#expandZone").animate({ height: "130px" }).addClass("active"); } // 为当前元素添加"btn-active"样式，同时移除同级其它元素的"btn-active"样式 $(this).addClass("btn-active").siblings().removeClass("btn-active"); return false; }); // 模拟点击closeBtn按钮 $("#expandZone #closeBtn").on("click", function() { $("#expandZone").animate({ height: "0px" }, function() { $(this).removeClass("active"); $("#menuList .btn-active").removeClass("btn-active"); }); return false; }); }); </script> </head> <body> <div id="menuList" class="navlist"> <a href="#">首页</a> <a href="#">课程大厅</a> <a href="#">学习中心</a> <a href="#">个人中心</a> <a href="#">关于我们</a> </div> <div id="expandZone" class="expand"> <div class="expdiv"> <div class="expdiv-list"> <a href="#">慕课网主页</a> </div> <div class="expdiv-list"> <a href="#" id="A4">前端课程</a> <a href="#">手机开发</a> <a href="#">后台编程</a> </div> <div class="expdiv-list"> <a href="#">Javascript</a> <a href="#">CSS</a> <a href="#">JQuery</a> </div> <div class="expdiv-list"> 个人信息： </div> <div class="expdiv-list"> 公司地址：北京市西城区德外大街10号 </div> </div> <div id="closeBtn" class="close-btn"> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/XDJjy/p/4681211.html
