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

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

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

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

1. <div class="khFooter">
   
2. <ul class="clearfix">
   
3. <li>
   
4. <a href="https://www.uw7.cn/">
   
5. <img src="http://url/tbimg/footer01.png" alt="免费课程小图标"/>
   
6. 免费课程
   
7. </a>
   
8. </li>
   
9. <li>
   
10. <a rel="nofollow" href="mqqwpa://im/chat?chat_type=wpa&uin=4175455&version=1&src_type=web">
    
11. <img src="http://url/tbimg/footer04.png" alt="建站客服咨询小图标"/>
    
12. QQ咨询
    
13. </a>
    
14. </li>
    
15. <li>
    
16. <a href="javascript:void(0)" class="weixibutton">
    
17. <img src="http://url/tbimg/footer03.png" alt="建站微信咨询小图标"/>
    
18. 微信咨询
    
19. </a>
    
20. <div class="wxhao">
    
21. 微信号：<strong>xuewangzhan</strong><br/>
    
22. <span>（请复制加好友后咨询）</span>
    
23. </div>
    
24. </li>
    
25. <li>
    
26. <a rel="nofollow" href="https://www.uw7.cn">
    
27. <img src="http://url/tbimg/footer05.png" alt="建站培训课程小图标"/>
    
28. VIP课程
    
29. </a>
    
30. </li>
    
31. </ul>
    
32. </div>

复制代码

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

1. <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
   
2. <script type="text/javascript">
   
3. $(".weixibutton").click(
   
4. function(){
   
5. $(".wxhao").toggle();
   
6. });
   
7. </script>

复制代码

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

1. .khFooter {padding:5px 1% 0;background: #1ba2ff;z-index: 99;position: fixed;bottom: 0px;width: 100%;}
   
2. .khFooter li{width:25%;text-align:center;float:left;position:relative;font-size:12px;}
   
3. .khFooter li a {display: block;color: #fff;}
   
4. .khFooter li img {display: block;width: 20px;height: 20px;margin: 0 auto;}
   
5. .khFooter .wxhao{display:none;position:absolute;bottom:105%;font-size:1.4em;width: 500%;padding:10px;left: -250%;line-height:1.6em;text-align: center;background:#f5f5f5;}
   
6. .khFooter .wxhao strong{font-weight:400;color:#f00;}
   
7. .khFooter .wxhao span{font-size:0.8em;}

复制代码

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

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