威宁热线

威宁团菜到家

[精品发布] 手机网站底部悬浮客服菜单制作方法(支持QQ、微信客服)

[复制链接]
威宁热线 发表于 2021-1-28 01:36:17 | 显示全部楼层 |阅读模式
手机网站与普通的PC网站最大的区别在于,手机网站的版面较小,有些版块不能像PC网站随意添加。例如手机网站的客服、菜单等都需要放在底部悬浮,这样既明显又不占位置了。效果如下图:

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

手机网站底部悬浮客服菜单制作方法(支持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文件夹里;

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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表