DIV+CSS京东商城产品分类适合所有版本

DIV+CSS京东商城产品分类适合所有版本第一步：在你所用的模板的css文件中加上以下代码[Copytoclipboard]ViewCodeCSS101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110.my_left_category{width211px;font-size12px;}.my_left_categoryh1{background-imageurl(imagesspring_06.jpg);height20px;background-repeatno-repeat;font-size14px;font-weightbold;padding-left15px;padding-top8px;margin0px;color#FFF;}.my_left_category.my_left_cat_list{width209px;border-color#ce2020;border-stylesolid;border-width0px1px1px1px;line-height13.5pt;}.my_left_category.my_left_cat_listh2{margin0px;padding3px5px0px9px;}.my_left_category.my_left_cat_listh2a{color#d6290b;font-weightbold;font-size14px;line-height22px;}.my_left_category.h2_cat{width209px;height26px;background-imageurl(imagesmy_menubg.gif);background-repeatno-repeat;line-height26px;font-weightnormal;color#333333;positionrelative;}.my_left_categorya{font12px;text-decorationnone;color#333333;}.my_left_categoryahover{text-decorationunderline;color#ff3333;}.my_left_categoryh3{margin0px;padding0px;height26px;font-size12px;font-weightnormal;displayblock;padding-left8px;}.my_left_categoryh3span{color#999999;width145px;floatright;}.my_left_categoryh3a{line-height26px;}.my_left_category.h3_cat{displaynone;width204px;positionabsolute;left184px;margin-top-26px;cursorauto;}.my_left_category.shadow{positioninherit;backgroundurl(imagesshadow_04.gif)lefttop;width204px;}.my_left_category.shadow_border{positioninherit;width200px;border1pxsolid#959595;margin-top1px;border-left-width0px;backgroundurl(imagesshadow_border.gif)no-repeat0px21px;background-color#ffffff;margin-bottom3px}.my_left_category.shadow_borderul{margin0;padding0;margin-left15px}.my_left_category.shadow_borderulli{list-stylenone;padding-left10px;background-imageurl(imagesmy_cat_sub_menu_dot.gif);background-repeatno-repeat;background-position0px8px;floatleft;width75px;height26px;overflowhidden;}.my_left_category.active_cat{z-index99;background-position0-25px;cursorpointer;}.my_left_category.active_cath3{font-weightbold}.my_left_category.active_cath3span{displaynone;}.my_left_category.active_catdiv{displayblock;}第二步：模板文件夹的librarycategory_tree.lbi内容改为：[Copytoclipboard]ViewCodeHTML10111213141516171819202122232425262728293031323334353637383940414243444546metahttp-equiv=Content-Typecontent=texthtml;charset=gbkdivclass=my_left_categoryh1商品分类h1divclass=my_left_cat_list{assignvar=pre_item_levelvalue=-1}!--{foreachfrom=cat_list(0,0,false,3,false)item=cat}--{if$cat.levellt2&&$pre_item_levelgt0}divdiv{if}{if$cat.leveleq0}h2ahref={$cat.url}{$cat.nameescapehtml}ah2{elseif$cat.leveleq1}divclass=h2_catonmouseover=this.className='h2_catactive_cat'onmouseout=this.className='h2_cat'h3span-{$cat.cat_descescapehtml}spanahref={$cat.url}{$cat.nameescapehtml}ah3divclass=h3_catdivclass=shadowdivclass=shadow_borderul{elseif$cat.leveleq2}liahref={$cat.url}{$cat.nameescapehtml}ali{if}{assignvar=pre_item_levelvalue=$cat.level}!--{foreach}--{if$pre_item_levelgt0}uldivdivdivdiv{if}meta第三步：把用到的图片拷贝到模板文件夹的images目录完成！注：京东的二级分类名称旁边列了2个三级分类名称（灰色）,作为三级分类的提示。参考其他网友的做法，这里使用二级类的描述字段cat_desc来实现,【用程序去调取二级类下的前两个三级分类完全是化简为烦的事情。】但这个效果要修改includeslib_common.php才生效的，当然，不修改也不会出错，只是没有显示罢了。修改方法：在includeslib_common.php的cat_list函数中找到$sql=“SELECTc.cat_id,c.cat_name,修改为$sql=“SELECTc.cat_id,c.cat_name,c.cat_desc,补充一下：在firefox等浏览器中，如果展开的部分被遮挡（由于父级容器overflowhidden引起），在.my_left_category的样式中加上positionabsolute即可