1. 一个客服按钮固定在网页右侧。
  2. 默认状态下，客服菜单是隐藏的（只显示一个小的触发按钮）。
  3. 当鼠标悬停在或点击（移动端友好）触发按钮上时，菜单会平滑地滑出,显示客服列表和联系方式。
  4. 当鼠标移开或再次点击时,菜单会平滑地滑回隐藏状态。

最终效果预览

完整代码

你只需要将以下三部分代码分别复制到你的HTML文件中对应的位置即可。

网页右侧隐藏的js在线客服菜单特效代码
（图片来源网络，侵删）

HTML 代码 (放在 <body> 标签内)

这部分定义了客服菜单的结构。

<!-- 右侧在线客服菜单 -->
<div id="customer-service">
  <!-- 触发按钮 -->
  <div class="cs-trigger">
    <i class="fas fa-headset"></i>
  </div>
  <!-- 展开的菜单内容 -->
  <div class="cs-content">
    <h3>在线客服</h3>
    <ul>
      <li>
        <a href="https://wpa.qq.com/msgrd?v=3&uin=你的QQ号码&site=qq&menu=yes" target="_blank">
          <i class="fab fa-qq"></i>
          <span>QQ客服</span>
        </a>
      </li>
      <li>
        <a href="mailto:support@example.com">
          <i class="fas fa-envelope"></i>
          <span>邮箱联系</span>
        </a>
      </li>
      <li>
        <a href="tel:13800138000">
          <i class="fas fa-phone"></i>
          <span>电话咨询</span>
        </a>
      </li>
      <li>
        <a href="#" onclick="alert('请扫描二维码添加微信客服'); return false;">
          <i class="fab fa-weixin"></i>
          <span>微信客服</span>
        </a>
        <!-- 如果需要显示二维码，可以取消下面这行注释 -->
        <!-- <img src="your-qrcode.png" alt="微信二维码"> -->
      </li>
    </ul>
  </div>
</div>

CSS 代码 (放在 <head> 标签内或外部CSS文件中)

这部分负责样式和动画效果。

/* 基础样式重置和定位 */
#customer-service {
  position: fixed; /* 固定定位 */
  right: 0; /* 靠右 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 精确垂直居中 */
  z-index: 1000; /* 确保在最上层 */
  user-select: none; /* 防止用户选中文字 */
}
/* 触发按钮样式 */
.cs-trigger {
  width: 50px;
  height: 50px;
  background-color: #007bff; /* 按钮背景色 */
  border-radius: 25px 0 0 25px; /* 左侧圆角，形成“门”形 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* 左侧阴影，增加立体感 */
  transition: background-color 0.3s ease;
}
.cs-trigger:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景色 */
}
.cs-trigger i {
  color: white;
  font-size: 24px;
}
容器 */
.cs-content {
  width: 200px;
  background-color: white;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1); /* 左侧阴影 */
  border-radius: 10px 0 0 10px; /* 左侧圆角 */
  padding: 15px;
  margin-right: 50px; /* 为触发按钮留出空间 */
  /* 默认隐藏，并设置过渡动画 */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease-in-out; /* 平滑的过渡效果 */
}
/* 当菜单被激活（展开）时的状态 */
#customer-service.active .cs-content {
  max-height: 300px; /* 设置一个足够大的值以容纳内容 */
  opacity: 1;
  margin-right: 0; /* 滑出时，与按钮重叠 */
}
样式 */
.cs-content h3 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: center;
  color: #333;
  font-size: 16px;
}
/* 列表样式 */
.cs-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cs-content li {
  margin-bottom: 12px;
}
/* 链接样式 */
.cs-content a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #555;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}
.cs-content a:hover {
  background-color: #f0f0f0;
}
.cs-content a i {
  font-size: 20px;
  margin-right: 10px;
  width: 25px;
  text-align: center;
}
.cs-content a span {
  font-size: 14px;
}
/* (可选) 二维码样式 */
.cs-content img {
  width: 150px;
  height: 150px;
  margin: 10px auto;
  display: block;
  border: 1px solid #ddd;
}

JavaScript 代码 (放在 <body> 标签结束前或外部JS文件中)

这部分控制菜单的显示和隐藏逻辑。

document.addEventListener('DOMContentLoaded', function() {
  const customerService = document.getElementById('customer-service');
  const trigger = customerService.querySelector('.cs-trigger');
  // 为触发按钮添加点击事件
  trigger.addEventListener('click', function() {
    // 切换 'active' 类名
    customerService.classList.toggle('active');
  });
  // (可选) 点击菜单内容区域时，保持菜单打开
  const csContent = customerService.querySelector('.cs-content');
  csContent.addEventListener('click', function(event) {
    // 阻止事件冒泡，防止点击内容区域时触发外部的点击关闭逻辑
    event.stopPropagation();
  });
  // (可选) 点击页面其他地方时关闭菜单
  document.addEventListener('click', function(event) {
    // 如果点击的不是客服菜单区域，则关闭菜单
    if (!customerService.contains(event.target)) {
      customerService.classList.remove('active');
    }
  });
});

如何使用和自定义

  1. 引入 Font Awesome 图标库： 代码中使用了 fa-headset, fab fa-qq, fas fa-envelope 等图标，你需要先引入 Font Awesome，最简单的方式是在 <head> 中添加以下链接：

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  2. 修改联系方式：

    • QQ客服: 将HTML中的 你的QQ号码 替换成你自己的QQ号。
    • 邮箱联系: 将 support@example.com 替换成你的邮箱地址。
    • 电话咨询: 将 13800138000 替换成你的电话号码。
    • 微信客服: 如果你希望点击后显示一个二维码图片，请准备好你的二维码图片（your-qrcode.png），然后取消HTML中对应 <img> 标签的注释,并确保图片路径正确。

  3. 自定义样式：

    • 颜色: 在CSS中修改 background-color 的值来改变按钮和菜单的颜色。
    • 大小: 修改 .cs-trigger 的 width 和 height，以及 .cs-content 的 width 来调整大小。
    • 动画: 在CSS的 transition 属性中，可以调整动画的时长（如 4s）和效果（如 ease-in-out）。

  4. 移动端适配：

    • 当前的JS代码同时支持 click 事件，因此在手机上点击按钮也能正常展开/收起菜单。
    • CSS中的 user-select: none; 可以防止用户长按按钮时出现系统菜单,提升体验。

这个代码方案结构清晰，易于理解和修改,希望能满足你的需求！