分享一款基于CSS3实现淘宝右侧固定导航特效。这是一款带有动画效果的css3仿淘宝右侧导航样式代码。效果图如下：

在线预览    源码下载

实现的代码。

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>
            <li class="tb-toolbar-item-split"></li>
            <li class="tb-toolbar-item tb-toolbar-history" data-item="history">
                <a href="#" class="tb-toolbar-item-hd">
                    <div class="tb-toolbar-item-icon">
                        
                    </div>
                    <div class="tb-toolbar-item-tip">
                        我的足迹
                        <div class="tb-toolbar-item-arrow">
                            ◆
                        </div>
                    </div>
                </a>
                <div class="tb-toolbar-item-bd tb-toolbar-loading">
                </div>
            </li>
            <li class="tb-toolbar-item-split"></li>
            <li class="tb-toolbar-item tb-toolbar-item-coupon" data-item="coupon">
                <a href="#" class="tb-toolbar-item-hd tb-toolbar-item-hd-coupon">
                    <div class="tb-toolbar-item-icon">
                        
                    </div>
                    <div class="tb-toolbar-item-tip tb-toolbar-item-tip-coupon">
                        店铺优惠
                        <div class="tb-toolbar-item-arrow">
                            ◆
                        </div>
                    </div>
                </a>
                <div class="tb-toolbar-item-hd-extra">
                    <div class="tb-toolbar-item-bubble tb-toolbar-item-bubble-coupon J_TBToolbarBubbleCoupon">
                        <span class="tb-toolbar-item-bubble-txt">该店铺可领优惠券</span>
                        <br />
                        <a href="#" class="tb-toolbar-item-bubble-btn J_TBToolbarBubbleOpenCouponTgr">立即领取</a>
                        <span class="tb-toolbar-item-arrow">◆</span>
                        <span class="tb-toolbar-item-bubble-saw"></span>
                    </div>
                </div>
                <div class="tb-toolbar-item-bd tb-toolbar-item-bd-coupon tb-toolbar-loading"></div>
            </li>

via：http://www.w2bc.com/article/css3-taobao-right-nav

在线预览    源码下载