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-image:url(images/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-image:url(images/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(images/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(images/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-image:url(images/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. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
   
2. <div class="my_left_category">
   
3. <h1>商品分类</h1>
   
4. <div class="my_left_cat_list">
   
5. {assign var="pre_item_level" value=-1}
   
6. <!--{foreach from=cat_list(0,0,false,3,false) item=cat}-->
   
7. {if $cat.level lt 2 && $pre_item_level gt 0}
   
8. </ul></div></div></div></div>
   
9. {/if}
   
10. 
    
11. {if $cat.level eq 0}
    
12. <h2><a href="{$cat.url}">{$cat.name|escape:html}</a></h2>
    
13. {elseif $cat.level eq 1}
    
14. <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
    
15. <h3><SPAN> - {$cat.cat_desc|escape:html}</SPAN><a href="{$cat.url}">{$cat.name|escape:html}</a></h3>
    
16. <div class="h3_cat">
    
17. <div class="shadow">
    
18. <div class="shadow_border">
    
19. <ul>
    
20. {elseif $cat.level eq 2}
    
21. <li><a href="{$cat.url}">{$cat.name|escape:html}</a></li>
    
22. {/if}
    
23. 
    
24. {assign var="pre_item_level" value=$cat.level}
    
25. <!--{/foreach}-->
    
26. {if $pre_item_level gt 0}
    
27. </ul></div></div></div></div>
    
28. {/if}
    
29. 
    
30. </div>
    
31. </div>

复制代码

第三步：把用到的图片拷贝到模板文件夹的images 目录
ok完成！


注：
京东的二级分类名称旁边列了2个三级分类名称（灰色）,作为三级分类的 提示。参考其他网友的做法，这里使用二级类的 描述字段cat_desc来实现,【用 程序去调取二级类下的前两个三级分类完全是化简为烦的事情。】但这个效果要修改 /includes/lib_common.php 才生效的，当然， 不修改也不会出错，只是没有显示罢了。

修改方法：在/includes/lib_common.php 的cat_list函数中找到
$sql = "SELECT c.cat_id, c.cat_name,
修改为
$sql = "SELECT c.cat_id, c.cat_name, c.cat_desc,


补充一下：
在firefox等浏览器中，如果展开的部分被遮挡（由于父级容器overflow:hidden引起），在.my_left_category的样式中加上 position:absolute即可。

今天上午放出的category_tree.lbi代码有点bug，当最后一个顶级分类下面没有子类的时候，会生成一段多余的“</ul></div></div></div></div>”，把26行的</ul></div></div></div></div>改为

1. {if $pre_item_level gt 0}
   
2.       </ul></div></div></div></div>
   
3.       {/if}

复制代码

即可
1楼的附件和代码已更改过来，本楼之前下载的朋友请更新一下