jQuery仿苏宁易购导航
最近看了些网上的各类导航网站源码,自己学习制作了一个仿苏宁易购的导航栏
jQuery部分代码
1 $(function(){ 2 $(".CategoryTree>ul>li").hover(function(index){ 3 var obj=$(this).offset(); 4 var xobj=obj.left+240+"px"; 5 var yobj=$(this).index()*(-$(this).height()-1)+"px"; 6 $(this).addClass("selected"); 7 $(this).children("e:eq(0)").addClass("h2-tit"); 8 $(this).css("background","#856F62").siblings().css("background","#FFFFFF"); 9 $(this).children(".tit").children("p").css("color","white"); 10 $(this).children(".content").css({"left":xobj,"top":yobj}).show(); 11 },function(){ 12 $(this).removeClass("selected"); 13 $(this).children(".tit").removeClass("h2-tit"); 14 $(this).children(".tit").children("p").css("color","#999"); 15 $(this).children(".tit").children("span").css("color","black"); 16 $(this).children(".content").hide(); 17 }) 18 })
Css部分代码
1 .ColLeft { width:241px;background:#fff;padding:0;margin:0;} 2 .CategoryTree{ border:1px solid #ccc;height:482px;} 3 .CategoryTree .titlebar { width:240px;height:30px;background-color:rgb(255,138,21);} 4 .CategoryTree .titlebar h3{margin:0;padding:0;line-height:30px;font-size:"宋体";font-size:16px;font-weight:bold;letter-spacing:0.1em;color:#FFF;margin-left:15px;} 5 .CategoryTree ul{padding:0;width:240px;height:auto;} 6 .CategoryTree ul li { height:50px; padding:0 10px; position:relative;vertical-align:middle; cursor:pointer;z-index:1;display:block;font-family:"宋体";font-size:12px;letter-spacing:0.1em;border-bottom:1px #e4e4e4 solid;} 7 .CategoryTree ul li .tit{display:block;margin-left:5px;padding-top:5px;color:#999;} 8 .CategoryTree ul li .tit span{ font-weight:bold;color:#000;} 9 .CategoryTree ul li .content{ position:absolute;width:700px;height:457px;background:#fff;border:1px solid #e6e6e6;display:none;z-index:2;margin-left:-1px;} 10 .CategoryTree ul li .content .cleft{ width:500px;height:457px; float:left;} 11 .CategoryTree ul li .content .cright{ width:190px;height:457px; float:right;} 12 .CategoryTree ul li.selected{z-index:99; position:relative; } 13 .CategoryTree ul li.selected .h2-tit{position:absolute; z-index:88;background:#fff;border:1px #666 solid; border-bottom:3px #666 solid; border-right:0;width:170px;height:24px;line-height:24px; padding-left:2px;margin-left:-4px;}
HTML部分代码
1 <div class="main"> 2 <div class="ColLeft"> 3 <div class="CategoryTree"> 4 <div class="titlebar"><h3>全部商品分类</h3></div> 5 <ul> 6 <li> 7 <a class="tit"><p><span>手机 相机 电脑</span><br />合约机 笔记本 单反 DIY 微单</p></a> 8 <div class="content"> 9 <div class="cleft"></div> 10 <div class="cright"></div> 11 </div> 12 </li> 13 <li> 14 <a class="tit"><p><span>办公 影音 配件</span><br />路由器 存储卡 打印 耳机 U盘<p></a> 15 <div class="content"> 16 <div class="cleft"></div> 17 <div class="cright"></div> 18 </div> 19 </li> 20 <li> 21 <a class="tit"><p><span>家用电器 小家电</span><br />电视 冰箱 洗衣机 空调 取暖器<p></a> 22 <div class="content"> 23 <div class="cleft"></div> 24 <div class="cright"></div> 25 </div> 26 </li> 27 <li> 28 <a class="tit"><p><span>母婴 玩具</span><br />奶粉 纸尿裤 喂养 辅食 玩具<p></a> 29 <div class="content"> 30 <div class="cleft"></div> 31 <div class="cright"></div> 32 </div> 33 </li> 34 <li> 35 <a class="tit"><p><span>护肤 洗护</span><br />洁面 护肤 彩妆 洗发 沐浴<p></a> 36 <div class="content"> 37 <div class="cleft"></div> 38 <div class="cright"></div> 39 </div> 40 </li> 41 <li> 42 <a class="tit"><p><span>服装馆 箱包 汽车用品</span><br />男装 男包 钟表 珠宝 运动户外<p></a> 43 <div class="content"> 44 <div class="cleft"></div> 45 <div class="cright"></div> 46 </div> 47 </li> 48 <li> 49 <a class="tit"><p><span>居家 美食</span><br />家纺 家装建材 厨具 酒水 清洁<p></a> 50 <div class="content"> 51 <div class="cleft"></div> 52 <div class="cright"></div> 53 </div> 54 </li> 55 <li> 56 <a class="tit"><p><span>图书 电子书</span><br />教育 历史 育儿 小说 儿童书<p></a> 57 <div class="content"> 58 <div class="cleft"></div> 59 <div class="cright"></div> 60 </div> 61 </li> 62 <li> 63 <a class="tit"><p><span>游戏 充值 旅行 彩票</span><br />保险 酒店 生活缴费 礼品卡<p></a> 64 <div class="content"> 65 <div class="cleft"></div> 66 <div class="cright"></div> 67 </div> 68 </li> 69 </ul> 70 </div> 71 </div>