纯代码为WordPress移动端底部添加菜单栏功能

随着微信的崛起,连带着微信民众号也成为了一时火热。我依稀还记适合初给客户做微信商城的时刻,商家的第一个要求险些都市提到——底部自界说菜单功效。现在嘛,虽说这个功效已经逐渐祛除了,但它也乘着站在风口之际,迅速成为了移动端的一个标配,好比有赞商城。前阶段,我一直想着啥时给公司网站重新写个移动端界面,今天终于有空处置了,然后溘然想到这个底部 nav 菜单栏功效,便随手写上这个功效。总体马纰漏虎,就一段简朴的 html 代码跟 css 样式。

只是到了邻近下班,才突然想起来:前段时间知更鸟的 begin 主题似乎新添了这个功效,而且更完善(默认不显示菜单栏,下拉到一定位置以后才显示)。以是我晚上得空后审查一下元素,发现挺简朴的,就索性移植到 leo 主题。

功效步骤

1、在 footer.php 文件合适的位置插入如下代码:

  1.     <?php if ( wp_is_mobile() ){ ?>
  2.     <nav class="footer-nav" style="display: block;">
  3.         <ul class="footer-menu">
  4.         <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >1</a></li>
  5.         <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >2</a></li>
  6.         <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >3</a></li>
  7.         <li><a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >4</a></li>
  8.     </ul></nav>
  9.     <?php } ?>

2、打开 style.css 文件,在最后面添加 css 样式:

  1.     /** footer menu **/
  2.     .footer-nav {
  3.         position: fixed;
  4.         rightright: 0;
  5.         bottombottom: 0;
  6.         width: 100%;
  7.         z-index: 2;
  8.         background: #fff;
  9.         display: none;
  10.         border-top: 1px solid #ddd;
  11.     }
  12.     .footer-nav ul li {
  13.         float: left;
  14.         width: 25%;
  15.         text-align: center;
  16.         border-right: 1px solid #ddd;
  17.     }
  18.     .footer-nav ul li:last-child {
  19.         border-right: 0;
  20.     }
  21.     .footer-nav ul li a {
  22.         line-height: 35px;
  23.     }
  24.     .footer-nav ul li a i {
  25.         font-size: 15px !important;
  26.     }

3、找到自用主题常用的 js 文件,打开并在其最后添加以下 js 代码:

  1.     // 页脚菜单
  2.     $(window).scroll(function () {
  3.         var scrollTop = $(window).scrollTop();
  4.         var $windowHeight = $(window).innerHeight();
  5.         scrollTop > 350 ? $(".footer-nav").fadeIn(200).css("display","block") : $(".footer-nav").fadeOut(200);
  6.     });

然后就没然后,有使用 cdn 的童鞋注重强刷、祛除缓存。详细效果请看下图:

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 纯代码为WordPress移动端底部添加菜单栏功能 https://zhutizhen.com/14503.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务