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. .my_left_category h1{
6. background-p_w_picpath:url(p_w_picpaths/spring_06.jpg);
7. height:20px;
8. background-repeat:no-repeat;
9. font-size:14px;
10. font-weight:bold;
11. padding-left:15px;
12. padding-top:8px;
13. margin:0px;
14. color:#FFF;
16. .my_left_category .my_left_cat_list{
17. width:209px;
18. border-color:#ce2020;
19. border-style:solid;
20. border-width:0px 1px 1px 1px;
21. line-height:13.5pt;
23. .my_left_category .my_left_cat_list h2 {
25. padding:3px 5px 0px 9px;
27. .my_left_category .my_left_cat_list h2 a{
28. color:#d6290b;
31. line-height:22px;
33. .my_left_category .h2_cat{
35. height:26px;
36. background-p_w_picpath:url(p_w_picpaths/my_menubg.gif);
38. line-height:26px;
39. font-weight:normal;
40. color:#333333;
41. position:relative;
43. .my_left_category a{
44. font:12px;
45. text-decoration:none;
48. .my_left_category a:hover{
49. text-decoration:underline;
50. color:#ff3333;
52. .my_left_category h3{
54. padding:0px;
58. display:block;
59. padding-left:8px;
61. .my_left_category h3 span{color:#999999; width:145px; float:right;}
62. .my_left_category h3 a{ line-height:26px;}
63. .my_left_category .h3_cat{
64. display:none;
65. width:204px;
66. position:absolute;
67. left:184px;
68. margin-top:-26px;
69. cursor:auto;
71. .my_left_category .shadow{
72. position:inherit;
73. background:url(p_w_picpaths/shadow_04.gif) left top;
76. .my_left_category .shadow_border{
78. width:200px;
79. border:1px solid #959595; margin-top:1px;
80. border-left-width:0px;
81. background:url(p_w_picpaths/shadow_border.gif) no-repeat 0px 21px;
82. background-color:#ffffff;
83. margin-bottom:3px
85. .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}
86. .my_left_category .shadow_border ul li {
87. list-style:none;
88. padding-left:10px;
89. background-p_w_picpath:url(p_w_picpaths/my_cat_sub_menu_dot.gif);
91. background-position:0px 8px;
92. float:left;
93. width:75px;
95. overflow:hidden;
97. .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}
98. .my_left_category .active_cat h3 { font-weight:bold}
99. .my_left_category .active_cat h3 span{ display:none;}
100. .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. {if $cat.level eq 0}
11. <h2><a href="{$cat.url}">{$cat.name|escape:html}</a></h2>
12. {elseif $cat.level eq 1}
13. <div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
14. <h3><SPAN> - {$cat.cat_desc|escape:html}</SPAN><a href="{$cat.url}">{$cat.name|escape:html}</a></h3>
15. <div class="h3_cat">
16. <div class="shadow">
17. <div class="shadow_border">
18. <ul>
19. {elseif $cat.level eq 2}
20. <li><a href="{$cat.url}">{$cat.name|escape:html}</a></li>
22. {assign var="pre_item_level" value=$cat.level}
23. <!--{/foreach}-->
24. {if $pre_item_level gt 0}
27. </div>

第三步：把用到的图片拷贝到模板文件夹的p_w_picpaths目录

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>改为

2.       </ul></div></div></div></div>
3.       {/if}

即可

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