纯CSS仿淘宝右侧悬浮窗口侧边栏代码下载

分享一个仿淘宝右边的侧栏的一个Demo、完全使用CSS3实现的、没有一点JS代码、主要实现的效果是淘宝右侧固定导航、而且带有动画效果的、最后有源代码下载地址、有兴趣的朋友可以下载看看、可以很方便的集成到自己的项目里面、下面是整个Demo的效果图

部分HTML代码

<li class="tb-toolbar-item tb-toolbar-item-cart" data-item="cart">
    <a href="#" class="tb-toolbar-item-hd tb-toolbar-item-hd-cart J_TBToolbarCart"> 
    <div class="tb-toolbar-item-icon tb-toolbar-item-icon-cart">
        
    </div> 
    <div class="tb-toolbar-item-label tb-toolbar-item-label-cart">
        购物车
    </div> 
    <div class="J_ToolbarCartNum tb-toolbar-item-badge-cart">
        0
    </div> 
    <div class="tb-toolbar-item-tip">
        我的购物车
    <div class="tb-toolbar-item-arrow">
        ◆
    </div>
    </div>
    </a> 
   <div class="tb-toolbar-item-bd tb-toolbar-mini-cart tb-toolbar-loading"> </div>
</li>

部分相关CSS

.tb-toolbar-item-cart {
  height:auto;
  *height:110px
}
.tb-toolbar-item-hd-cart {
  height:auto;
  *height:110px;
  padding-bottom:5px
}
.tb-toolbar-item-icon-cart {
  line-height:32px
}
.tb-toolbar-item-label-cart {
  width:20px;
  height:50px;
  line-height:16px;
  padding:0;
  margin:0 auto
}
.tb-toolbar-item-label-cart {
  color:#666
}
.tb-toolbar-item-badge-cart {
  border-radius:10px;
  background-color:#f40;
  color:#fff;
  width:18px;
  height:18px;
  line-height:18px;
  text-align:center;
  margin:0 auto
}
.tb-toolbar-item-border-cart {
  position:absolute;
  top:0;
  left:8px;
  height:108px;
  width:20px;
  border:1px dotted #bbb;
  border-width:1px 0
}
.tb-toolbar-item-cart .tb-toolbar-item-bd {
  width:330px;
  background-color:#f1f1f1
}

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1qWYGraW 密码: uphj