头像

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

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

纯CSS3实现,有天气预报、购物车、我的足迹、店铺优惠、反馈、返回顶部等项目。鼠标移动到上去,会提示该菜单的名称。

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

CSS3仿淘宝右侧固定导航悬浮层
分类:导航菜单 > 图标导航 难易:中级
查看演示 下载资源: 198 下载资源 下载积分: 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>
评论19
头像

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

  • 头像 18楼
    12-28 09:45
    alisa_bai
    不错,商场网站刚好用的到
  • 头像 17楼
    12-20 16:06
    不要说爱我
    有点乱了,不过还可以借鉴下。
  • 头像 16楼
    12-06 19:50
    taykey
    这个不错,,有意思。。
  • 头像 15楼
    10-31 21:56
    1122233
    太简单了啊,还行
  • 头像 14楼
    09-30 09:37
    七巧玲珑心
    是我想要的
  • 头像 13楼
    09-26 09:36
    toease
    购物车也是常用功能
  • 头像 12楼
    09-15 20:10
    dlboy
    好用挺不错的
  • 头像 11楼
    09-03 10:19
    夏嘻嘻嘻嘻
    刚好是我想用的。。
  • 头像 10楼
    08-24 09:26
    mali1711
    不错呦,已经下载了
  • 头像 9楼
    08-05 08:05
    我邪恶
    一季度和收费的恢复规划
1 2