纯CSS仿淘宝右侧悬浮窗口侧边栏代码下载
2016-01-25 13:13:52  By: shinyuu

• shinyuu
• CSS3教程
• 0
• 10620
• 8

分享一个仿淘宝右边的侧栏的一个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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛