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

投稿   龙砚庭博客  2018-05-04 07:36:03  245 人阅读  30 条评论

随着微信的崛起,连带着微信公众号也成为了一时火热。我依稀还记得当初给客户做微信商城的时候,商家的第一个要求几乎都会提到——底部自定义菜单功能。如今嘛,虽说这个功能已经逐渐没落了,但它也乘着站在风口之际,迅速成为了移动端的一个标配,比如有赞商城。

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

前阶段,我一直想着啥时给公司网站重新写个移动端界面,今天终于有空处理了,然后忽然想到这个底部 nav 菜单栏功能,便顺手写上这个功能。总体马马虎虎,就一段简单的 html 代码跟 css 样式。

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

WordPress 移动端底部添加菜单栏功能步骤

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="#">1</a></li>
  5.     <li><a href="#">2</a></li>
  6.     <li><a href="#">3</a></li>
  7.     <li><a href="#">4</a></li>
  8. </ul></nav>
  9. <?php } ?>
Ps:注意修改代码(用正确的内容替换#跟阿拉伯数字)

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

  1. /** footer menu **/
  2. .footer-nav {
  3.     positionfixed;
  4.     rightright: 0;
  5.     bottombottom: 0;
  6.     width: 100%;
  7.     z-index: 2;
  8.     background#fff;
  9.     displaynone;
  10.     border-top1px solid #ddd;
  11. }
  12. .footer-nav ul li {
  13.     floatleft;
  14.     width: 25%;
  15.     text-aligncenter;
  16.     border-right1px solid #ddd;
  17. }
  18. .footer-nav ul li:last-child {
  19.     border-right: 0;
  20. }
  21. .footer-nav ul li a {
  22.     line-height35px;
  23. }
  24. .footer-nav ul li a i {
  25.     font-size15px !important;
  26. }
Ps:没啥好说的,小细节请自行修改。

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 的童鞋注意强刷、清除缓存。具体效果请看下图:

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

至于 DEMO?用手机(移动端)打开龙砚庭站点,下拉就有新的事物冒出哦。不信你试试!

历史上的今天:

文章标签: ,   ,  
原文地址:https://loomob.com/470.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙砚庭博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
龙砚庭博客

 发表评论


  1. 大事记
    大事记 【秀才】 @回复

    底部的菜单栏相当的实用,尤其是企业站,但底部的缺点就相当于遮罩一样,会影响文章的阅读。 [思考]

  2. 健康的呼唤
    健康的呼唤 【小白】 @回复

    技术很关键

  3. 健康的呼唤
    健康的呼唤 【小白】 @回复

    很实用的功能

  4. 银色月航
    银色月航 【进士】 @回复

    这一波可以有

  5. 小白蜀黍网赚
    小白蜀黍网赚 【举人】 @回复

    这个技术贴

  6. 鬼手六
    鬼手六 【书童】 @回复

    很实用的功能

  7. QQ游客
    QQ游客 【小白】 @回复

    感谢分享找好久了感谢

  8. 西枫里博客
    西枫里博客 【进士】 @回复

    原来大佬们都开有专栏呢。

  9. BanYuner
    BanYuner 【书童】 @回复

    曾经有想过,但是说实话,感觉有点多余了,现在的手机,一个自带一个下巴,然后浏览器又有一个下巴,加上你这个下巴,一共三个,而且有的主题还有固定导航,感觉本身不大的手机屏幕光这些就占据了很多了,浏览体验也不好

  10. 曹操吉祥三宝
    曹操吉祥三宝 【小白】 @回复

    一定条件下非常有用

  11. 大国小事
    大国小事 【秀才】 @回复

    这个功能我一直想要,可惜不知道方法。以后用上。

  12. 清秋暖冬
    清秋暖冬 【举人】 @回复

    看别的娱乐网站长有很多人都在用这个移动底部导航

  13. 很文博客
    很文博客 【小白】 @回复

    这个不错,看看有需要加上这一段。

  14. 忘记了回忆
    忘记了回忆 【秀才】 @回复

    typecho可以实现吗?

  15. 猫鼬博客
    猫鼬博客 【小白】 @回复

    哇,这个我主题没有,确实很实用。 [哈哈]

  16. 80后记忆
    80后记忆 【举人】 @回复

    这个功能实现的方法其实还挺多,纯代码的还是方便。

  17. 99八十一
    99八十一 【举人】 @回复

    这个看个人喜好,我觉得本身带导航菜单就没必要有底部导航了~

  18. 薅羊毛
    薅羊毛 【进士】 @回复

    用了ZB 这些都不用折腾 更专注赚钱………

  19. 靠谱学生兼职网
    靠谱学生兼职网 【进士】 @回复

    只是已经用了ZB,离开wp一段时间咯 [呵呵]

  20. 梁兴健
    梁兴健 【举人】 @回复

    很实用的一段小代码 [赞]

  21. 善记事博客
    善记事博客 【书童】 @回复

    动手能力很强 [赞]

  22. 狂放
    狂放 【进士】 @回复

    最好用响应式写啦233,我不太喜欢这样的风格

  23. 官仁博客("("
    官仁博客("(" 【举人】 @回复

    其实吧,个人感觉这样子并不是很好,比如我屏幕本来就小,还给遮住下面一块,就不舒服了

  24. 闲鱼
    闲鱼 【举人】 @回复

    日常点赞大佬的文章 [赞]

  25. 呆毛网
    呆毛网 【举人】 @回复

    [思考] 好说挺好的。

  26. 手机赚钱
    手机赚钱 【进士】 @回复

    一般很少去研究这个,网站做起来,才会开始注意一些体验什么的

  27. 里维斯社
    里维斯社 【进士】 @回复

    底部菜单功能不错,都在往移动端方向转移重心

  28. 钟水洲
    钟水洲 【秀才】 @回复

    既然公布了,是不是也改跟风流行一下

  29. 米扑博客
    米扑博客 【进士】 @回复

    很实用的功能 [太开心]

  30. 沈唁志
    沈唁志 【进士】 @回复

    橘子大佬没看到底部啊。。哦,我手机访问的电脑模式,换成手机就有了