ECshop纯DIV+CSS实现京东商城分类（不需jquery）适合所有版本

有不少人想做京东 商城 分类效果， 搜索了一下之前的帖子，发现大虾们一般都是直接下
载了京东的 代码并在其基础上改。但这样会出现一个问题，就是ecshop不兼容jquery，
而这个问题 解决起来比较复杂，更不好的是它会破坏ecshop的内部函数，不利于以后版
本升级。

大家不需要盲目迷信大站，其实京东商城的分类效果完全可以用纯DIV+CSS实现，不需
要jquery，甚至一句javascript都不写也能实现。

废话少说，先上图
 


然后上代码
第一步：在你所用的 模板的css 文件中加上以下代码

1. .my_left_category{
   
2. width:211px;
   
3. font-size:12px;
   
4. }
   
5. 
   
6. 
   
7. .my_left_category h1{
   
8. background-p_w_picpath:url(p_w_picpaths/spring_06.jpg);
   
9. height:20px;
   
10. background-repeat:no-repeat;
    
11. font-size:14px;
    
12. font-weight:bold;
    
13. padding-left:15px;
    
14. padding-top:8px;
    
15. margin:0px;
    
16. color:#FFF;
    
17. }
    
18. 
    
19. .my_left_category .my_left_cat_list{
    
20. width:209px;
    
21. border-color:#ce2020;
    
22. border-style:solid;
    
23. border-width:0px 1px 1px 1px;
    
24. line-height:13.5pt;
    
25. }
    
26. .my_left_category .my_left_cat_list h2 {
    
27. margin:0px;
    
28. padding:3px 5px 0px 9px;
    
29. }
    
30. .my_left_category .my_left_cat_list h2 a{
    
31. color:#d6290b;
    
32. font-weight:bold;
    
33. font-size:14px;
    
34. line-height:22px;
    
35. }
    
36. 
    
37. .my_left_category .h2_cat{
    
38. width:209px;
    
39. height:26px;
    
40. background-p_w_picpath:url(p_w_picpaths/my_menubg.gif);
    
41. background-repeat:no-repeat;
    
42. line-height:26px;
    
43. font-weight:normal;
    
44. color:#333333;
    
45. position:relative;
    
46. }
    
47. 
    
48. .my_left_category a{
    
49. font:12px;
    
50. text-decoration:none;
    
51. color:#333333;
    
52. }
    
53. .my_left_category a:hover{
    
54. text-decoration:underline;
    
55. color:#ff3333;
    
56. }
    
57. 
    
58. .my_left_category h3{
    
59. margin:0px;
    
60. padding:0px;
    
61. height:26px;
    
62. font-size:12px;
    
63. font-weight:normal;
    
64. display:block;
    
65. padding-left:8px;
    
66. }
    
67. .my_left_category h3 span{color:#999999; width:145px; float:right;}
    
68. .my_left_category h3 a{ line-height:26px;}
    
69. 
    
70. .my_left_category .h3_cat{
    
71. display:none;
    
72. width:204px;
    
73. position:absolute;
    
74. left:184px;
    
75. margin-top:-26px;
    
76. cursor:auto;
    
77. }
    
78. 
    
79. .my_left_category .shadow{
    
80. position:inherit;
    
81. background:url(p_w_picpaths/shadow_04.gif) left top;
    
82. width:204px;
    
83. }
    
84. 
    
85. .my_left_category .shadow_border{
    
86. position:inherit;
    
87. width:200px;
    
88. border:1px solid #959595; margin-top:1px;
    
89. border-left-width:0px;
    
90. background:url(p_w_picpaths/shadow_border.gif) no-repeat 0px 21px;
    
91. background-color:#ffffff;
    
92. margin-bottom:3px
    
93. }
    
94. .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
    
95. .my_left_category .shadow_border ul li {
    
96. list-style:none;
    
97. padding-left:10px;
    
98. background-p_w_picpath:url(p_w_picpaths/my_cat_sub_menu_dot.gif);
    
99. background-repeat:no-repeat;
    
100. background-position:0px 8px;
     
101. float:left;
     
102. width:75px;
     
103. height:26px;
     
104. overflow:hidden;
     
105. }
     
106. 
     
107. .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
     
108. .my_left_category .active_cat h3 { font-weight:bold}
     
109. .my_left_category .active_cat h3 span{ display:none;}
     
110. .my_left_category .active_cat div{display:block;}

复制代码

第二步：模板文件夹的library/category_tree.lbi内容改为：

1. 
   
2. 
   

3. 商品分类

   
   
4. 
   
5. {assign var="pre_item_level" value=-1}
   
6. 
   
7. {if $cat.level lt 2 && $pre_item_level gt 0}
   

{/if}

{if $cat.level eq 0}

{$cat.name|escape:html}

{elseif $cat.level eq 1}

- {$cat.cat_desc|escape:html}{$cat.name|escape:html}

• {elseif $cat.level eq 2}
  
• {$cat.name|escape:html}


• {/if}
  
• 
  
• {assign var="pre_item_level" value=$cat.level}
  
• 
  
• {if $pre_item_level gt 0}