仿京东侧边栏导航购物车特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 39 14



特效描述:侧边栏 导航购物车。仿京东侧边栏导航购物车特效代码下载、、jQuery红色的侧边栏浮动商城图标导航,包含用户中心、购物车列表、收藏喜欢、幸运文字滚动等效果代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="https://lib.51qianduan.com/js/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.51qianduan.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./lib/base.css"/>
<link rel="stylesheet" href="./lib/dome.css">

2. 引入JS

<script src="./lib/jquery.min.js"></script>
<script src="./lib/bootstrap.min.js"></script>
<script src="./lib/dome.js"></script>

3. HTML代码

    <!--购物车侧边栏-->
<div class="qyzSidebar">
    <div class="sidebar">
        <!--购物车点击展开-->
        <div   class="unfold  unfoldToggle">
            <!--购物车-->
            <div class="trolley">
                <h3 class="trolleyH3">
                    <a href="" class="trolleyA">
                        <i class="fa fa-shopping-cart fa-lg trolleyuser"></i>
                        <em class="trolleyA" style="font-size: 14px">购物车</em>
                    </a>
                    <i class="fa fa-times wipe"></i>
                </h3>
                <!--商品-->
                <div class="trolleyCommodity">
                    <div class="comBox">
                        <!--没有登录-->
                        <div class="Notlogged" style="display: none">
                            <div class="NotloggedBox">
                                <span>亲,您还没有登录呦,登录即可查看购物车</span>
                                <a href="">登录</a>
                            </div>
                        </div>
                        <!--登录后-->
                        <div class="logged">
                            <div class="loggedCs">
                                <!--每一个商品-->
                                <div class="loggedBox">
                                    <div class="loggedText">
                                        <!--图片-->
                                        <span class="loggedImg">
                                                            <img src="images/sp.png" alt="">
                                                        </span>
                                        <!--规格-->
                                        <div class="loggedName">
                                            神舟(HASEE)精盾T67E GTX1050Ti 4G独显 15.6英寸商务
                                        </div>
                                        <!--价格-->
                                        <div class="loggedPrice">
                                            ¥<span class="Price">5599.00</span>
                                            <em>×</em>
                                            <span class="Pricedata">1</span>
                                            <!--删除-->
                                            <a href="" class="loggedDelete">删除</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="loggedBox">
                                    <div class="loggedText">
                                        <!--图片-->
                                        <span class="loggedImg">
                                                            <img src="images/sp.png" alt="">
                                                        </span>
                                        <!--规格-->
                                        <div class="loggedName">
                                            神舟(HASEE)精盾T67E GTX1050Ti 4G独显 15.6英寸商务
                                        </div>
                                        <!--价格-->
                                        <div class="loggedPrice">
                                            ¥<span class="Price">5599.00</span>
                                            <em>×</em>
                                            <span class="Pricedata">1</span>
                                            <!--删除-->
                                            <a href="" class="loggedDelete">删除</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="loggedBox">
                                    <div class="loggedText">
                                        <!--图片-->
                                        <span class="loggedImg">
                                                            <img src="images/sp.png" alt="">
                                                        </span>
                                        <!--规格-->
                                        <div class="loggedName">
                                            神舟(HASEE)精盾T67E GTX1050Ti 4G独显 15.6英寸商务
                                        </div>
                                        <!--价格-->
                                        <div class="loggedPrice">
                                            ¥<span class="Price">5599.00</span>
                                            <em>×</em>
                                            <span class="Pricedata">1</span>
                                            <!--删除-->
                                            <a href="" class="loggedDelete">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--去结算-->
                <div class="delete">
                    <div class="deleteBox">
                        <!--总计商品件数-->
                        <div class="deletedata">
                            <span>2</span>件商品
                        </div>
                        <!--合计金额-->
                        <div class="deletesum">
                            共计:¥
                            <span>10000.00</span>
                        </div>
                        <!--去购物车结算-->
                        <a href="" class="closeA">去购物车结算</a>
                    </div>
                </div>
            </div>
        </div>
        <!--活动点击展开-->
        <div  class="unfold  activity">
            <!--活动背景-->
            <!--<h3 class="trolleyH3">-->
            <!--<a href="" class="trolleyA">-->
            <!--<em class="trolleyA" style="font-size: 14px">活动中奖名单</em>-->
            <!--</a>-->
            <!--<i class="fa fa-times wipe"></i>-->
            <!--</h3>-->
            <div class="trolley activityB">
                <!--推荐商品-->
                <div class="recommend">
                    <div class="recommendImg">
                        <img src="" alt="">
                    </div>
                    <div class="recommendImg">
                        <img src="" alt="">
                    </div>
                </div>
                                <!--幸运用户-->
                                <div class="Lucky">
                                    <span class="bor"></span>
                                    <span>幸运嘉宾</span>
                                    <span  class="bor bor1"></span>
                                    <span>手机号码</span>
                                    <span  class="bor"></span>
                                    <div id="demo" style="overflow:hidden;height: 200px;width:100%; overflow:hidden;float:left">
                                        <div id=demo1>
                                    <ul class="LuckyUl">
                                        <li >
                                            <span class="LuckyName">德玛西亚</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">盖伦</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">艾希</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">皇子</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">提莫队长</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">托儿索</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">儿童劫</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">娃娃鱼</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">喜之螂</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                        <li >
                                            <span class="LuckyName">我会回来的</span>
                                            <span class="Luckytal">110119120911</span>
                                        </li>
                                    </ul>
                                    </div>
                                    <div id=demo2></div>
                                    </div>
                                </div>
            </div>
        </div>
        <!--点击菜单-->
        <div class="sidebaRmenu">
            <!--个人-->
            <div class="sidebaPersonage">
                <i class="fa fa-user-o fa-lg user"></i>
                <em class="tab-text">用户中心</em>
            </div>
            <!--购物车-->
            <div class="sidebaPersonage bgc1">
                <i class="fa fa-shopping-cart fa-lg user"></i>
                <em class="tab-text">购物车</em>
                <span class="amount">11</span>
            </div>
            <!--收藏-->
            <div class="sidebaPersonage ">
                <i class="fa fa-heart-o fa-lg user"></i>
                <em class="tab-text">收藏</em>
            </div>
        </div>
        <!--点击活动-->
        <div class="activityBox">
            <div class="activityBgc"></div>
        </div>
        <!--回到顶部-->
        <div class="toTop">
            <div class="toToparrows">
                <a href="#hoemtab" class="topa">
                    <i class="fa fa-angle-up fa-2x topBgc"></i>
                    <em class="topem">顶部</em>
                </a>
            </div>
        </div>
    </div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 二级导航菜单 下拉导航菜单 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 导航菜单导航条

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到