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

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

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

纯代码为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. 鬼手六
    鬼手六 @回复

    很实用的功能

  8. QQ游客
    QQ游客 @回复

    感谢分享找好久了感谢

  9. 西枫里博客
    西枫里博客 @回复

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

  10. BanYuner
    BanYuner @回复

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

  11. 曹操吉祥三宝
    曹操吉祥三宝 @回复

    一定条件下非常有用

  12. 大国小事
    大国小事 @回复

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

  13. 清秋暖冬
    清秋暖冬 @回复

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

  14. 很文博客
    很文博客 @回复

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

  15. 忘记了回忆
    忘记了回忆 @回复

    typecho可以实现吗?

  16. 猫鼬博客
    猫鼬博客 @回复

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

  17. 80后记忆
    80后记忆 @回复

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

  18. 99八十一
    99八十一 @回复

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

  19. 薅羊毛
    薅羊毛 @回复

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

  20. 靠谱学生兼职网
    靠谱学生兼职网 @回复

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

  21. 梁兴健
    梁兴健 @回复

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

  22. 善记事博客
    善记事博客 @回复

    动手能力很强 [赞]

  23. 狂放
    狂放 @回复

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

  24. 官仁博客("("
    官仁博客("(" @回复

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

  25. 闲鱼
    闲鱼 @回复

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

  26. 呆毛网
    呆毛网 @回复

    [思考] 好说挺好的。

  27. 手机赚钱
    手机赚钱 @回复

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

  28. 里维斯社
    里维斯社 @回复

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

  29. 钟水洲
    钟水洲 @回复

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

  30. 米扑博客
    米扑博客 @回复

    很实用的功能 [太开心]

  31. 沈唁志
    沈唁志 @回复

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