CSS3仿淘宝右侧固定导航悬浮层

纯CSS3实现，有天气预报、购物车、我的足迹、店铺优惠、反馈、返回顶部等项目。鼠标移动到上去，会提示该菜单的名称。
分类：导航菜单 > 图标导航难易：中级
查看演示下载资源下载积分： 20 积分
导航菜单html代码

<div class="tb-toolbar"> 
    <div class="tb-toolbar-space" style="height: 3%;"></div> 
    <ul class="tb-toolbar-list tb-toolbar-list-with-worthbuying tb-toolbar-list-with-cart tb-toolbar-list-with-history tb-toolbar-list-with-coupon"> 
        <li class="tb-toolbar-item tb-toolbar-history"> <a href="#" class="tb-toolbar-item-hd"> 
                <div class="tb-toolbar-item-icon">
                     
                </div> 
                <div class="tb-toolbar-item-tipsj"> 
                    <iframe id="popFrame" scrolling="no" frameborder="0" width="205" allowtransparency="true" height="205" src="#" target="_blank">-</iframe> 
                    <div class="tb-toolbar-item-arrowsj">
                        ◆ 
                    </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-worthbuying" data-item="worthbuying"> <a href="#" class="tb-toolbar-item-hd"> 
                <div class="tb-toolbar-item-icon">
                     
                </div> 
                <div class="tb-toolbar-item-tipa"> 
                    <div class="tb-toolbar-item-arrowa">
                        ◆ 
                    </div> 
                </div> </a> 
            <div class="tb-toolbar-item-bd"></div> </li> 
        <li class="tb-toolbar-item-split"></li> 
        <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> 
    </ul> 
    <div class="tb-toolbar-space" style="height: 7%;"></div> 
    <ul class="tb-toolbar-list tb-toolbar-list-with-feedback tb-toolbar-list-with-gotop"> 
        <li class="tb-toolbar-item" data-item="feedback"> <a href="#" class="tb-toolbar-item-hd"> 
                <div class="tb-toolbar-item-icon">
                     
                </div> 
                <div class="tb-toolbar-item-tip"> 
                    <span class="tb-toolbar-item-tip-text">反馈</span> 
                    <div class="tb-toolbar-item-arrow">
                        ◆ 
                    </div> 
                </div> </a> </li> 
        <li class="tb-toolbar-item" data-item="gotop"> <a href="#" class="tb-toolbar-item-hd"> 
                <div class="tb-toolbar-item-icon">
                     
                </div> 
                <div class="tb-toolbar-item-tip"> 
                    <span class="tb-toolbar-item-tip-text">顶部</span> 
                    <div class="tb-toolbar-item-arrow">
                        ◆ 
                    </div> 
                </div> </a> 
        </li> 
    </ul> 
</div>