DIVCSS京东商城产品分类适合所有版本

DIV+CSS京东商城产品分类适合所有版本
第一步：在你所用的模板的css文件中加上以下代码[Copy to clipboard]View Code CSS10
11
12
13
14
15
16
17
18
19
20
21
22
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
104
105
106
107
108
109
110
.my_left_category{
width211px;
font-size12px;
}
.my_left_category h1{
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-width0px 1px 1px 1px;
line-height13.5pt;
}
.my_left_category .my_left_cat_list h2 { margin0px;
padding3px 5px 0px 9px;
}
.my_left_category .my_left_cat_list h2 a{ 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_category a{
font12px;
text-decorationnone; color#333333;
}
.my_left_category ahover{ text-decorationunderline; color#ff3333;
}
.my_left_category h3{ margin0px;
padding0px;
height26px;
font-size12px;
font-weightnormal;
displayblock;
padding-left8px;
}
.my_left_category h3 span{color#999999; width145px; floatright;} .my_left_category h3 a{ line-height26px;}
.my_left_category .h3_cat{
displaynone;
width204px;
positionabsolute;
left184px;
margin-top-26px;
cursorauto;
}
.my_left_category .shadow{
positioninherit;
backgroundurl(imagesshadow_04.gif) left top;
width204px;
}
.my_left_category .shadow_border{
positioninherit;
width200px;
border1px solid #959595; margin-top1px;
border-left-width0px;
backgroundurl(imagesshadow_border.gif) no-repeat 0px 21px;
background-color#ffffff;
margin-bottom3px
}
.my_left_category .shadow_border ul{margin0; padding0; margin-left15px} .my_left_category .shadow_border ul li {
list-stylenone;
padding-left10px;
background-imageurl(imagesmy_cat_sub_menu_dot.gif);
background-repeatno-repeat;
background-position0px 8px;
floatleft;
width75px;
height26px;
overflowhidden;
}
.my_left_category .active_cat{ z-index99;background-position0 -25px;cursorpointer;}
.my_left_category .active_cat h3 { font-weightbold}
.my_left_category .active_cat h3 span{ displaynone;}
.my_left_category .active_cat div{displayblock;}
第二步：模板文件夹的 librarycategory_tree.lbi内容改为：
[Copy to clipboard]View Code HTML10
11
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
45
46
meta http-equiv=Content-Type content=texthtml; charset=gbk div class=my_left_category
h1商品分类h1
div class=my_left_cat_list
{assign var=pre_item_level value=-1}
!--{foreach from=cat_list(0,0,false,3,false) item=cat}--{if $cat.level lt 2 && $pre_item_level gt 0}
div
div
{if}
{if $cat.level eq 0}
h2a href={$cat.url}{$escapehtml}ah2
{elseif $cat.level eq 1}
div class=h2_cat onmouseover=this.className='h2_cat active_cat' onmouseout=this.className='h2_cat'
h3span - {$cat.cat_descescapehtml}spana href={$cat.url}{$escapehtml}ah3
div class=h3_cat
div class=shadow
div class=shadow_border
ul
{elseif $cat.level eq 2}
lia href={$cat.url}{$escapehtml}ali
{if}
{assign var=pre_item_level value=$cat.level}
!--{foreach}--
{if $pre_item_level gt 0}
ul
div
div
div
div
{if}
meta
第三步：把用到的图片拷贝到模板文件夹的images目录
完成！
注：
京东的二级分类名称旁边列了2个三级分类名称（灰色）,作为三级分类的提示。

参考其他网友的做法，这里使用二级类的描述字段cat_desc来实现,【用程序去调取二级类下的前两个三级分类完全是化简为烦的事情。

】但这个效果要修改includeslib_common.php 才生效的，当然，不修改也不会出错，只是没有显示罢了。

修改方法：
在includeslib_common.php 的cat_list函数中找到
$sql = “SELECT c.cat_id, c.cat_name,
修改为
$sql = “SELECT c.cat_id, c.cat_name, c.cat_desc,
补充一下：
在firefox等浏览器中，如果展开的部分被遮挡（由于父级容器overflowhidden引起），在.my_left_category的样式中加上 positionabsolute即可。