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