建站教程 2022-04-06

手机网站底部悬浮客服菜单制作方法（支持QQ、微信客服）

手机网站与普通的PC网站最大的区别在于，手机网站的版面较小，有些版块不能像PC网站随意添加。例如手机网站的客服、菜单等都需要放在底部悬浮，这样既明显又不占位置了。效果如下图：

下面介绍一下手机网站底部悬浮客服菜单怎么制作，它是支持QQ、微信客服直接咨询的。（也可以直接安装响应式WordPress网站在线客服插件达到相同的效果）

第一步：在网站模板的底部模板（一般是footer.php或者foot.htm）里，放上以下的代码，它是手机网站底部悬浮客服菜单的显示内容。（注意修改代码里的http://url/ 为自己的网站域名，还有QQ号、微信号）

第二步：由于点击微信微信时，需要弹出微信号，所以还需要在第一步的代码下面放上以下的JS代码。

<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap">&lt;script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;<br><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">"text/javascript"</span><span style="color: #339933;">&gt;</span><br>
$<span style="color: #009900;">(</span><span style="color: #3366CC;">".weixibutton"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">click</span><span style="color: #009900;">(</span><br><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br>
$<span style="color: #009900;">(</span><span style="color: #3366CC;">".wxhao"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">toggle</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></div></div>

$(".weixibutton").click( function(){

$(".wxhao").toggle(); }); </script></div></div>

第三步：在自己网站模板的CSS文件（一般是style.css）里放在以下的CSS代码，用于控制手机网站底部悬浮客服菜单始终位于手机网站底部，并且是悬浮状态的。

第四步：下载小图标，并且在网站空间根目录下新建一个tbimg文件夹，上传小图标图片到tbimg文件夹里；

这样，通过以上的四步操作，我们就可以自己制作出手机网站底部悬浮客服菜单了。

相关阅读：

腾迅QQ客服在线代码生成方法

网站如何添加独立asp客服系统

如何给自己网站添加QQ客服浮窗

由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 手机网站底部悬浮客服菜单制作方法（支持QQ、微信客服）

分享到：