有不少人想做京东商城分类效果.docxVIP

有不少人想做京东商城分类效果，搜索了一下之前的帖子，发现大虾们一般都是直接下载了京东的代码并在其基础上改。但这样会出现一个问题，就是ecshop不兼容jquery，而这个问题解决起来比较复杂，更不好的是它会破坏ecshop的内部函数，不利于以后版本升级。大家不需要盲目迷信大站，其实京东商城的分类效果完全可以用纯DIV+CSS实现，不需要jquery，甚至一句javascript都不写也能实现。废话少说，先上图?然后上代码第一步：在你所用的模板的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 span{color:#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 ul{margin: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.g