《纯div+css实现京东商城分类(不需jquery)适合所有版本》由会员分享，可在线阅读，更多相关《纯div+css实现京东商城分类(不需jquery)适合所有版本（5页珍藏版）》请在金锄头文库上搜索。
1、纯 DIV+CSS 实现京东商城分类（不需jquery）适合所有版本ecshop 模板堂() 第一步：在你所用的模板的 css 文件中加上以下代码.my_left_categorywidth:211px;font-size:12px;.my_left_category h1background-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;col
2、or:#FFF;.my_left_category .my_left_cat_listwidth: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 acolor:#d6290b;font-weight:bold;font-size:14
3、px;line-height:22px;.my_left_category .h2_catwidth: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 afont:12px;text-decoration:none;color:#333333;.my_left_category a:hovertex
4、t-decoration:underline;color:#ff3333;.my_left_category h3margin: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_catdisplay:none;
5、width:204px;position:absolute;left:184px;margin-top:-26px;cursor:auto;.my_left_category .shadowposition:inherit;background:url(images/shadow_04.gif) left top; width:204px;.my_left_category .shadow_borderposition:inherit;width:200px;border:1px solid #959595; margin-top:1px;border-left-width:0px;backg
6、round: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);backg
7、round-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_catego
8、ry .active_cat divdisplay:block;第二步：模板文件夹的 library/category_tree.lbi 内容改为：商品分类assign var=pre_item_level value=-1if $cat.level lt 2 & $pre_item_level gt 0/ifif $cat.level eq 0$cat.name|escape:htmlelseif $cat.level eq 1- $cat.cat_desc|escape:html$cat.name|escape:htmlelseif $cat.level eq 2$cat.name|esc
9、ape:html/ifassign var=pre_item_level value=$cat.levelif $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 = SELECT c.cat_id, c.cat_name, c.cat_desc,补充一下：在 firefox 等浏览器中，如果展开的部分被遮挡（由于父级容器overflow:hidden 引起） ，在.my_left_category 的样式中加上 position:absolute 即可。【ECSHOP 模板堂出品】
