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樓的附件和代碼已更改過來，本樓之前下載下傳的朋友請更新一下