WordPress给移动端底部添加导航菜单

达令家
      看到很多博客移动端底部都有单独的导航菜单,体验还不错,九哥亲测可用,这里把实现方法分享给小伙伴们。

1.效果展示

Wordpress给移动端底部添加导航菜单

2.实现方法

HTML代码

  1. <style type="text/css">
  2. .nav{
  3. display:none;
  4. }
  5. @media only screen and (max-width:450px){
  6. .site-info{
  7. padding:15px 0 58px 0;
  8. }
  9. #advert_widget, .php_text .widget-text, .widget .textwidget{
  10. padding:0;
  11. }
  12. .nav{
  13. position:fixed;
  14. z-index:999;
  15. bottom:0;
  16. width:100%;
  17. height:40px;
  18. display:block;
  19. right:0;
  20. box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
  21. -webkit-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
  22. -mox-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
  23. -o-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
  24. -ms-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
  25. }
  26. .nav{
  27. padding-left:0;
  28. margin-bottom:0;
  29. list-style:none;
  30. }
  31. .nav span{
  32. width:50px !important;
  33. height:50px !important;
  34. }
  35. .font-text {
  36. margin: 0 0 0 5px;
  37. color: #1ba1e2;
  38. }
  39. .nav > ul{
  40. position:relative;
  41. z-index:1;
  42. height:40px;
  43. background: rgba(255,255,255,.85);
  44. list-style-type:none;
  45. margin:0px;
  46. padding:0px!important;
  47. }
  48. .nav  ul  li{
  49. position:relative;
  50. float:left;
  51. width:20%;
  52. text-align:center;
  53. margin:0px;
  54. padding:0px
  55. list-style-type:none;
  56. top:5px;
  57. }
  58. .nav  ul  li a{
  59. display:block;
  60. margin-right:auto;
  61. margin-left:auto;
  62. }
  63. }
  64. </style>
  65. <div class="nav">
  66. <ul>
  67. <li> <a href="http://www.hhjz365.com/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
  68. <li> <a href="http://www.hhjz365.com/xinyu.html"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
  69. <li> <a href="http://www.hhjz365.com/links.html"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
  70. <li> <a href="http://www.hhjz365.com/liuyan.html"><span class="font-text"><i class="fa-comment-o fa"></i> 留言</span></a></li>
  71. <li> <a href="http://www.hhjz365.com/about.html"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
  72. </ul>
  73. </div>

使用方法

后台→外观→小工具→增强文本→页脚小工具→内容:复制粘贴以上代码保存即可。

      当然,导航菜单也可以使用图片,小伙伴们可以自行研究,也很简单。
weinxin
99八十一微信公众号
扫一扫关注99八十一微信公众号,打开微信简简单单即可查看99八十一所有内容,更快捷更方便。
九哥

吐槽一下取消吐槽

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前吐槽:22   其中:访客  13   博主  9

    • avatar QQ游客 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信 【小白】

      博主,你好,请问那个增强文本–页脚小工具在哪里的呢?我看了小工具那里只有文本并没有超级文本啊,也没看到页脚小工具,是要下插件吗?

        • avatar 九哥 博主 来自天朝的朋友 QQ浏览器  Android 8.0.0 STF-AL10 Build/HUAWEISTF-AL10

          @QQ游客 文本如果支持代码也可以。
          主题不一样吧应该,你可以直接添加到页脚文件 footer.php 里面。

        • avatar Him 来自天朝的朋友 搜狗浏览器 Windows 7 中国 移动 【小白】

          大神,代码不太懂,下面的链接和对应的文本倒是会换,其他需要换吗?能说明一下吗?蓝色字的都要替换还是怎样?

            • avatar Him 来自天朝的朋友 搜狗浏览器 Windows 7 中国 移动 【小白】

              @Him 或者能加个QQ之类的指导一下吗

              • avatar 九哥 博主 来自天朝的朋友 QQ浏览器  Android 8.0.0 STF-AL10 Build/HUAWEISTF-AL10

                @Him 只需把链接改成你的就可以了。

              • avatar 血月刀 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省孝感市 电信 【小白】

                怎么有一个错误,惭愧,又不懂脚本!九哥求救!

                • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通 【进士】

                  现在挺羡慕博主还有折腾的心和精力啊,我都打王者荣耀了。

                    • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                      @Koolight 我也很少折腾了,时间有限,游戏就更没时间玩了 :evil:

                    • avatar QQ游客 来自天朝的朋友 谷歌浏览器 Windows 7 山东省潍坊市 联通 【书童】

                      正是我需要的

                      • avatar 小小参谋 来自天朝的朋友 谷歌浏览器  HUAWEI MT7-TL00 Build/HuaweiMT7-TL00 P1 6.0 北京市 移动 【书童】

                        现在不显示了,是不是你停止用了呀。

                        • avatar 电炖锅的那些事 来自天朝的朋友 搜狗浏览器 Windows 7 湖南省长沙市 电信 【小白】

                          有技术就是好。
                          代码看不懂啊。学习。

                          • avatar 小萝博客 来自天朝的朋友 谷歌浏览器 Windows 10 江西省赣州市 电信 【小白】

                            这样方便多了 :wink:

                              • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                                @小萝博客 可以提供几个常用菜单在下面,体验不错的。

                              • avatar 懿古今 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信 【举人】

                                不错,其实直接在页脚显示菜单,页头就显示logo就行,这样看起来确实不错。头条号和微信号好像都是这样

                                  • avatar 九哥 博主 来自天朝的朋友 谷歌浏览器  Android 7.0 Mi-4c Build/NRD90M

                                    @懿古今 是啊,要么页头要么页脚,看个人喜好了。

                                  • avatar Koolight 来自天朝的朋友 Safari浏览器  Android 6.0 PE-CL00 Build/HuaweiPE-CL00 湖北省武汉市 联通 【进士】

                                    还有这种玩法,厉害了!自适应得很到位!

                                      • avatar 九哥 博主 来自天朝的朋友 QQ浏览器 Windows 7

                                        @Koolight 嗯,挺简单的,可以自己DIY。

                                      • avatar QQ游客 来自天朝的朋友 谷歌浏览器  Che1-CL20 Build/Che1-CL20) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.98 Mobile Safari/537.36 山东省潍坊市 移动 【书童】

                                        很不错,又学习一招,转载

                                        • avatar 伏笔 来自天朝的朋友 QQ浏览器 Windows 10 广东省东莞市 电信 【小白】

                                          噢 学习学习