头像

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

来源:http://www.sucaihuo.com/js/894.html 素材火管理员 2016-07-19 06:54浏览(1136) 收藏

纯CSS3实现,有天气预报、购物车、我的足迹、店铺优惠、反馈、返回顶部等项目。鼠标移动到上去,会提示该菜单的名称。
CSS3仿淘宝右侧固定导航悬浮层
分类:导航菜单 > 图标导航 难易:中级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 205 下载资源 下载积分: 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>
评论14
头像

友情提示:垃圾评论一律封号...

  • 头像 13楼
    05-25 19:46
    ·少溪··
    很好用,感谢老铁
  • 头像 12楼
    12-28 09:45
    alisa_bai
    不错,商场网站刚好用的到
  • 头像 11楼
    09-30 09:37
    七巧玲珑心
    是我想要的
  • 头像 10楼
    09-15 20:10
    dlboy
    好用挺不错的
  • 头像 9楼
    09-03 10:19
    夏嘻嘻嘻嘻
    刚好是我想用的。。
  • 头像 8楼
    08-24 09:26
    mali1711
    不错呦,已经下载了
  • 头像 7楼
    07-21 23:40
    昨夜枫满楼
    有更多效果二级就完美了
  • 头像 6楼
    07-20 21:41
    chun_94_chen
    有二级效果就好了,支持
  • 头像 5楼
    07-19 22:05
    dlboy
    效果不错!~~~~
  • 头像 4楼
    07-19 19:11
    look360
    有二级效果就好了
1 2