<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
? margin:0;
? padding:0;
}
ul{
? list-style:none;
}
#goods_category{
? width:240px;
? margin-top:10px;
? margin-left:10px;
? border:1px solid #ddd;
? position:fixed;
}
h4, ul{
? padding-top:5px;
? padding-bottom:5px;
? padding-left:10px;
}
h4.all_goods{
? background-color:#900;
? color:#fff;
? padding-left:10px;
}
li{
? display:inline-block;
? padding-right:5px;
? padding-top:2px;
? padding-bottom:2px;
? color:#666;
}
</style>
</head>
<body>
? <div id="goods_category">
? <h4 class="all_goods">所有商品分类</h4>
???? <dl class="cate">
??<dd>
???? <h4>服装/内衣/配件</h4>
???? <ul>
??????? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? <li>女装</li>
???? </ul>
??</dd>
??<dd>
???? <h4>鞋/箱包</h4>
???? <ul>
??????? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? <li>女鞋</li>
???? </ul>
??</dd>
??<dd>
???? <h4>珠宝饰品/手表眼镜</h4>
???? <ul>
??????? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? <li>珠宝</li>
???? </ul>
??</dd>
??<dd>
???? <h4>化妆品</h4>
???? <ul>
??????? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? <li>护肤</li>
???? </ul>
??</dd>
??<dd>
???? <h4>运动户外</h4>
???? <ul>
??????? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? <li>运动鞋</li>
???? </ul>
??</dd>
??<dd>
???? <h4>手机数码</h4>
???? <ul>
??????? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? <li>手机</li>
???? </ul>
??</dd>
??<dd>
???? <h4>家用电器</h4>
???? <ul>
??????? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? <li>大家电</li>
???? </ul>
??</dd>
??<dd>
???? <h4>家具建材</h4>
???? <ul>
??????? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? <li>灯具</li>
???? </ul>
??</dd>
??<dd>
???? <h4>家纺/居家</h4>
???? <ul>
??????? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? <li>四件套</li>
???? </ul>
??</dd>
??<dd>
???? <h4>母婴玩具</h4>
???? <ul>
??????? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? <li>奶粉</li>
???? </ul>
??</dd>
??<dd>
???? <h4>食品</h4>
???? <ul>
??????? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? <li>零食</li>
???? </ul>
??</dd>
??<dd>
???? <h4>医药保健</h4>
???? <ul>
??????? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? <li>保健</li>
???? </ul>
??</dd>
??<dd>
???? <h4>汽车配件</h4>
???? <ul>
??????? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? <li>汽车</li>
???? </ul>
??</dd>
??<dd>
???? <h4>图书音像</h4>
???? <ul>
??????? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? <li>考试</li>
???? </ul>
??</dd>
??<dd>
???? <h4>文化娱乐</h4>
???? <ul>
??????? <li>电子凭证</li>
???? <li>电子凭证</li>
???? <li>电子凭证</li>
???? <li>电子凭证</li>
???? </ul>
??</dd>
??<dd>
???? <h4>手机/网游点卡</h4>
??</dd>
? </dl>
? </div>
?
? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
? <p style="padding-left:300px">end</p>
? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
?? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
????? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
?? <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
<script>
/*
* 仿天猫首页-产品分类；
* ie8，ff，opera中测试可用，其余浏览器未测；
* ******made by keimon**********
* ********2013-01-14**********
*/
?$(function(){
?? $('dd:odd').css('backgroundColor','#eee');
?? var scrollT=0;
??? $(window).scroll(function(e,scrollT){
??? var scrollTop = $(document).scrollTop();
??? var scrolls = Math.floor(scrollTop/50);
??? if(scrolls>15){
?????? scrolls = 15;
??? }
??? $('dd ul:lt('+scrolls+')').slideUp();
??? $('dd ul:gt('+scrolls+')').slideDown();
??? if(scrolls==0){
????? $('dd ul').eq(0).slideDown();
??? }
?})
?})
</script>
</html>
```