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

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

添加时间:2021-03-11 14:00:00
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图标导航
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

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

导航菜单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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:CSS3仿淘宝右侧固定导航悬浮层

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.100683s