網站側邊客服代碼 摺疊式 圓球客服展示

首先是html代碼：

<section id="cebian">
    <div class="all close">
        <div class="shang">
            <div class="mune">
                <p>Chat with us!</p>
                <a href="#"><i class="iconfont icon-weixin2"></i></a>
            </div>
            <div class="mune">
                <p>Phone</p>
                <a href="#"><i class="iconfont icon-dianhuatianchong"></i></a>
            </div>
            <div class="mune">
                <p>Email</p>
                <a href="#"><i class="iconfont icon-youxiang2"></i></a>
            </div>
            <div class="mune">
                <p>Sign up</p>
                <a href="#"><i class="iconfont icon-yonghu"></i></a>
            </div>
            <div class="mune">
                <p>Chat</p>
                <a href="#"><i class="iconfont icon-message_full"></i></a>
            </div>

            <div id="open">
                <a href="#"><i class="iconfont icon-guanbi"></i></a>
            </div>
        </div>
    </div>
</section>

然後是css代碼：

* {
    margin: 0;
    padding: 0;
}

#cebian {
    background: rgba(255, 255, 255, 0.8);
    position: fixed;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    top: 0;
}

#cebian .all {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 30px 30px 0;
}

#cebian .all .shang {
    display: flex;
    flex-direction: column;

}

#cebian .all .shang>div {
    display: flex;
    justify-content: flex-end;
    height: 44px;
    margin-bottom: 15px;
}

#cebian .all .shang>div>a {
    height: 44px;
    line-height: 44px;
    text-align: center;
    text-decoration: none;
    width: 44px;
    display: block;
    box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}

#cebian .all .shang>div:nth-child(1) a {
    background: #ffcb00;
}

#cebian .all .shang>div:nth-child(2) a {
    background: #63c956;
}

#cebian .all .shang>div:nth-child(3) a {
    background: #be1867;
}

#cebian .all .shang>div:nth-child(4) {
    background: #ffcb00;
    display: none;
}

#cebian .all .shang>div:nth-child(5) a {
    background: #2d41a9;
}

#cebian .all .shang>div:nth-child(6) a {
    background: #008afc;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

#cebian .all .shang>div>a>.iconfont {
    color: #fff;
    font-size: 20px;
}

#cebian .all .shang>div>p {
    margin: 8px 15px;
    border: 1px solid #fff;
    padding: 6px 8px;
    color: #1d2d3c;
    line-height: 1em;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 0 8px #ccc;
    background: #fff;
}

#cebian .all .shang .mune {
    opacity: 0.9;
}

#cebian .all .shang .none {
    display: none;
}

.cebian {
    background: none;
    width: 0;
    height: 0;
    top: unset;
    right: 0;
    bottom: 0;
}

接下來是js代碼：

$(function () {
    var open = false;
    var first = true;
    if (first) {
        $("#open a i").addClass("icon-a-13Ashenglve");
        $("#open a i").removeClass("icon-guanbi");
        $(".mune").addClass("none");
        $("#cebian").css({ "background": "none", "width": "0", "height": "0", "top": "unset", "right": "0", "bottom": "0" });
        first = !first;
    }
    $("#cebian").click(function () {
        if (open) {
            $("#open a i").addClass("icon-a-13Ashenglve");
            $("#open a i").removeClass("icon-guanbi");
            $(".mune").addClass("none");
            $("#cebian").css({ "background": "none", "width": "0", "height": "0", "top": "unset", "right": "0", "bottom": "0" });
            open = !open;
        } else {
            $("#open a i").removeClass("icon-a-13Ashenglve");
            $("#open a i").addClass("icon-guanbi");
            $(".mune").removeClass("none");
            $("#cebian").attr("style", "");
            open = !open;
        }
    });
}); 

需要引入jQuery纔行生效！同時iconfont需要自己去引入或者查找對應的圖標