超级悬浮菜单插件（Superfloatingmenu）

作者：kuakeba.cn

网页右侧悬浮菜单插件，集合 二十五种 不同样式的按钮：

分享按钮、通用客服按钮、客服QQ、客服旺旺、客服微信/微信公众号、抖音号、快手号、客服电话（多号）、客服电话（单号）、办公地址、电子邮箱、购物车地址、VIP会员、自定义链接、在线购买、合作加盟、在线申请、文件下载、在线预约、收款码、APP下载、手机版二维码、通用二维码、繁简切换按钮、返回网页顶部。

功能特点

• 支持开启「屏蔽蜘蛛」设置：开启后百度 / 谷歌 / 360 / 搜狗等主流搜索引擎的蜘蛛无法看到功能菜单，但不影响抓取网页其他内容，有利于 SEO。
• 每个按钮可独立开启 / 关闭，配置不同的触发方式与展示内容。
• 按钮颜色、触发（点击或悬停）背景色、返回顶部按钮颜色可单独设置。
• 支持按钮圆角、距底部间距、距右侧间距、按钮上下间距自定义。
• 自动按浏览器窗口高度限制按钮数量，避免遮挡网页。

插件使用说明

1、可开启的按钮数量

受浏览器窗口高度限制，为了不影响正常使用插件，菜单按钮不能全部开启。

• PC 端按浏览器窗口高度 980px 计算、按钮间距 5px，最多可以开启 17 个按钮。
• 手机端按浏览器窗口高度 720px 计算、按钮间距 5px，最多可以开启 10 个按钮（返回网页顶部按钮除外）。
• 如果网站是响应式的，以手机端浏览器窗口高度限制为准。

超出数量的按钮会自动从菜单顶部开始隐藏。请把核心按钮排在菜单前面（列表靠前），不要放在末尾。

2、按钮的间距

按钮可以分别调整：

• 距网页底部间距（建议 165px）
• 距网页右侧间距（建议 0px）
• 按钮上下间距（建议 5px）

3、按钮的颜色

• 可以设置按钮的背景颜色和触发（点击或鼠标移动到按钮上）的背景颜色。
• 返回网页顶部的按钮颜色可以单独设置。

4、按钮圆角设置

可以给按钮添加圆角，0px 为方形，数值越大越圆润。

5、菜单按钮设置

不同的菜单按钮显示不同的内容。

PC 端 有三种触发按钮的类型：

1. 点击后显示模块内容，点击关闭按钮关闭；
2. 鼠标移动到上面就显示模块内容，鼠标移开关闭；
3. 点击后跳转。

手机端 有两种触发按钮的类型：

1. 点击后显示模块内容，点击关闭按钮关闭，再次点击关闭，或点击其他按钮关闭当前；
2. 点击后跳转。

6、返回网页顶部按钮

返回网页顶部按钮只有在网页下拉到一定高度时才会显示，点击按钮直接返回网页顶部。

安装

1. 将 Superfloatingmenu 目录上传到站点 plugins/ 目录；
2. 在后台「应用插件」中找到「超级悬浮菜单」，点击安装；
3. 安装后进入「超级悬浮菜单」管理页进行配置（全局设置 + 25 个按钮逐项配置）；
4. 保存后前台自动生效，无需修改主题模板。

文件结构

Superfloatingmenu/
├── plugin.json                      # 插件清单
├── icon.svg                         # 插件图标
├── SuperfloatingmenuPlugin.php      # 插件主类
├── routes.php                       # 后台路由
├── controller/admin/
│   ├── Base.php                     # 后台控制器基类
│   └── Config.php                   # 后台配置控制器
├── service/
│   └── Menu.php                     # 按钮定义 / 蜘蛛识别 / 菜单渲染
├── view/admin/config.html           # 后台配置页面
├── static/superfloatingmenu/
│   ├── superfloatingmenu.css        # 前台样式
│   ├── superfloatingmenu.js         # 前台脚本
│   ├── qrcode-lib.min.js            # 二维码生成库（MIT）
│   └── chinese-conv.js              # 简繁转换库（MIT）
└── README.md

依赖

• 前台图标使用主题自带的 Remixicon，无需额外引入。
• 二维码生成与简繁转换均使用本地静态文件，无外部 CDN 依赖。