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;}

View Code

 

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>

View Code

 

转载于:https://www.cnblogs.com/yelp/p/3474085.html