最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2016-07-19 06:54浏览(1691)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

CSS3仿淘宝右侧固定导航悬浮层
分类:导航菜单 > 图标导航 难易:中级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

导航菜单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>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/894.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    01-25 08:19
    ngu137
    不错的额!!!!666
1 2