纯DIV+CSS实现京东商城分类(不需jquery)适合所有版本.doc

纯DIV+CSS实现京东商城分类（不需jquery）适合所有版本ecshop模板堂() 第一步：在你所用的模板的css文件中加上以下代码.my_left_category width:211px; font-size:12px; .my_left_category h1 background-image:url(images/spring_06.jpg); height:20px; background-repeat:no-repeat; font-size:14px; font-weight:bold; padding-left:15px; padding-top:8px; margin:0px; color:#FFF; .my_left_category .my_left_cat_list width:209px; border-color:#ce2020; border-style:solid; border-width:0px 1px 1px 1px; line-height:13.5pt; .my_left_category .my_left_cat_list h2 margin:0px; padding:3px 5px 0px 9px; .my_left_category .my_left_cat_list h2 a color:#d6290b; font-weight:bold; font-size:14px; line-height:22px; .my_left_category .h2_cat width:209px; height:26px; background-image:url(images/my_menubg.gif); background-repeat:no-repeat; line-height:26px; font-weight:normal; color:#333333; position:relative; .my_left_category a font:12px; text-decoration:none; color:#333333; .my_left_category a:hover text-decoration:underline; color:#ff3333; .my_left_category h3 margin:0px; padding:0px; height:26px; font-size:12px; font-weight:normal; display:block; padding-left:8px; .my_left_category h3 spancolor:#999999; width:145px; float:right; .my_left_category h3 a line-height:26px;.my_left_category .h3_cat display:none; width:204px; position:absolute; left:184px; margin-top:-26px; cursor:auto; .my_left_category .shadow position:inherit; background:url(images/shadow_04.gif) left top; width:204px; .my_left_category .shadow_border position:inherit; width:200px; border:1px solid #959595; margin-top:1px; border-left-width:0px; background:url(images/shadow_border.gif) no-repeat 0px 21px; background-color:#ffffff; margin-bottom:3px .my_left_category .shadow_border ulmargin:0; padding:0; margin-left:15px .my_left_category .shadow_border ul li list-style:none; padding-left:10px; background-image:url(images/my_cat_sub_menu_dot.gif); background-repeat:no-repeat; background-position:0px 8px; float:left; width:75px; height:26px; overflow:hidden; .my_left_category .active_cat z-index:99;background-position:0 -25px;cursor:pointer; .my_left_category .active_cat h3 font-weight:bold .my_left_category .active_cat h3 span display:none; .my_left_category .active_cat divdisplay:block; 第二步：模板文件夹的library/category_tree.lbi内容改为： 商品分类 assign var=pre_item_level value=-1 if $cat.level lt 2 & $pre_item_level gt 0 /ifif $cat.level eq 0$|escape:html elseif $cat.level eq 1 - $cat.cat_desc|escape:html$|escape:html elseif $cat.level eq 2$|escape:html /ifassign var=pre_item_level value=$cat.level if $pre_item_level gt 0 /if 第三步：把用到的图片拷贝到模板文件夹的images目录ok完成！ 注： 京东的二级分类名称旁边列了2个三级分类名称（灰色）,作为三级分类的提示。参考其他网友的做法，这里使用二级类的描述字段cat_desc来实现,【用程序去调取二级类下的前两个三级分类完全是化简为烦的事情。】但这个效果要修改 /includes/lib_common.php 才生效的，当然，不修改也不会出错，只是没有显示罢了。修改方法：在/includes/lib_common.php 的cat_list函数中找到$sql = SELECT c.cat_id, c.cat_name,修改为$sql = SELEC