全百科精品资源分享
免费优质资源下载平台

纯代码给WordPress网站手机端底部添加菜单栏功能

播放按钮

前段时间突发奇想,想给自己的WordPress网站手机端底部加个菜单栏,但是怎么实现呢,于是全百科网研究了两天终于有了办法,所以今天就分享给大家如何实现。

代码教程:

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

// 作者:全百科网
// 网站:http://www.quanbaike.com/
<?php if ( wp_is_mobile() ){ ?>
<nav class="footer-nav" style="display: block;">
    <ul class="footer-menu">
    <li><a href="http://www.quanbaike.com/">全百科网</a></li>
    <li><a href="http://www.quanbaike.com/">PPT模版</a></li>
    <li><a href="http://www.quanbaike.com/">简历模版</a></li>
    <li><a href="http://www.quanbaike.com/">源码下载</a></li>
</ul></nav>
<?php } ?>

修改代码是大家自己替换超链接和文字。

2、打开 style.css 文件,在最后面添加 css 样式,大家可以自己美化修改:

// 作者:全百科网
// 网站:http://www.quanbaike.com/
/** footer menu **/
.footer-nav {
    position: fixed;
    rightright: 0;
    bottombottom: 0;
    width: 100%;
    z-index: 2;
    background: #fff;
    display: none;
    border-top: 1px solid #ddd;
}
.footer-nav ul li {
    float: left;
    width: 25%;
    text-align: center;
    border-right: 1px solid #ddd;
}
.footer-nav ul li:last-child {
    border-right: 0;
}
.footer-nav ul li a {
    line-height: 35px;
}
.footer-nav ul li a i {
    font-size: 15px !important;
}

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

// 作者:全百科网
// 网站:http://www.quanbaike.com/
// 页脚菜单
$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    var $windowHeight = $(window).innerHeight();
    scrollTop > 350 ? $(".footer-nav").fadeIn(200).css("display","block") : $(".footer-nav").fadeOut(200);
});

注意:如果你网站有使用 cdn请注意强刷、清除缓存,即可正常显示。

实现方法是不是很简单,快给你的WordPress网站手机端底部添加菜单栏功能吧。

Premium WordPress Themes Download
Download Best WordPress Themes Free Download
Premium WordPress Themes Download
Premium WordPress Themes Download
free online course
download huawei firmware
Download Best WordPress Themes Free Download
udemy free download

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0) 打赏
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 纯代码给WordPress网站手机端底部添加菜单栏功能
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏