零基础学做网站培训介绍

当前位置:

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

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

手机网站底部悬浮客服菜单

下面介绍一下手机网站底部悬浮客服菜单怎么制作,它是支持QQ、微信客服直接咨询的。

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


<div class="khFooter">
<ul class="clearfix">
<li>
<a href="https://www.xuewangzhan.net/jz/zichu/">
<img src="http://url/tbimg/footer01.png" alt="免费课程小图标"/>
免费课程
</a>
</li>
<li>
<a rel="nofollow" href="mqqwpa://im/chat?chat_type=wpa&uin=2289556365&version=1&src_type=web">
<img src="http://url/tbimg/footer04.png" alt="建站客服咨询小图标"/>
QQ咨询
</a>
</li>
<li>
<a href="javascript:void(0)" class="weixibutton">
<img src="http://url/tbimg/footer03.png" alt="建站微信咨询小图标"/>
微信咨询
</a>
<div class="wxhao">
微信号:<strong>xuewangzhan</strong><br/>
<span>(请复制加好友后咨询)</span>
</div>
</li>
<li>
<a rel="nofollow" href="https://www.xuewangzhan.net/vip">
<img src="http://url/tbimg/footer05.png" alt="建站培训课程小图标"/>
VIP课程
</a>
</li>
</ul>
</div>

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


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

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


.khFooter {padding:5px 1% 0;background: #1ba2ff;z-index: 99;position: fixed;bottom: 0px;width: 100%;}
.khFooter li{width:25%;text-align:center;float:left;position:relative;font-size:12px;}
.khFooter li a {display: block;color: #fff;}
.khFooter li img {display: block;width: 20px;height: 20px;margin: 0 auto;}
.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;}
.khFooter .wxhao strong{font-weight:400;color:#f00;}
.khFooter .wxhao span{font-size:0.8em;}

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程