纯CSS实现侧边栏浮动在线客服效果

今天我们就教给大家一个纯css书写的在线客服效果

首先我们有如下html结构

<div class="sideBar">
<div>
    <div class="tips">在线客服</div>
    <ul class="list">
        <li>QQ:1234567</li>
        <li>QQ:4567890</li>
        <li>QQ:2580369</li>
        <li>QQ:1472580</li>
    </ul>
</div>

上面的结构很简单，在线客服是按钮，下面的li是具体联系方式，当然可以直接加上QQ的在线链接，例如：

<a href="tencent://message/?uin=33443344&amp;Site=优美主题&amp;Menu=yes">33443344</a>

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>教你用CSS制作一个侧边栏浮动在线客服</title>
<style>
.sideBar {
    position:fixed;
    right:-122px;
    top:250px;
    background-color:#ffffff;
    border:#45B6F7 solid 1px;
    transition:right 0.5s;
}
.sideBar:hover {
    right:0;
}
.sideBar>div {
    position:relative;
}
.sideBar .tips {
    position:absolute;
    height:120px;
    line-height:25px;
    background-color:#45B6F7;
    width:40px;
    left:-40px;
    top:50px;
    text-align:center;
    box-sizing:border-box;
    padding:10px 10px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    font-weight:bold;
    color:#ffffff;
}
.sideBar .list {
    list-style:none;    
    padding:0;
    width:120px;
    margin:0;
}
.sideBar .list>li {
    cursor: pointer;
    padding:15px;
    border-top:#45B6F7 solid 1px;
}
.sideBar .list>li:hover {
    background-color:#45B6F7;
    color:#ffffff;
}
.sideBar .list>li:first-child {
    border-top:none;
}
</style>
</head>
<body>
<div class="sideBar">
    <div>
        <div class="tips">在线客服</div>
        <ul class="list">
            <li>QQ:1000</li>
            <li>QQ:2000</li>
            <li>QQ:3000</li>
            <li>QQ:4000</li>
        </ul>
    </div>
</div>
</body>
</html>

版权说明：文章[非商业性质]，有大量文章来源网络各处，本站只做收集，侵权联系删除。