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

2018-07-1700:13:40 10 3,013 人看过

如果对我们日常使用的 App 稍加留意,就会发现移动端的导航样式是非常丰富的。最常见的有标签式导航、抽屉式导航、列表式导航等等。今天行动派和大家分享的是在 WordPress 移动端实现简单的类似微信公众号自定义菜单的底部标签式导航。

 

一、效果图

先上效果图:

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

添加前

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

添加后

 

二、使用方法

实现的方法也非常的简单,只要将下面的代码添加到:后台→外观→小工具→增强文本→页脚小工具。然后将代码 67 行至 71 行中的菜单名和链接替换成你自己的即可。

 

  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(232,232,232,1.0);
  21. -webkit-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
  22. -mox-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
  23. -o-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);
  24. -ms-box-shadow:0px 0px 10px 3px rgba(232,232,232,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: #FFFFFF;
  38. }
  39. .nav > ul{
  40. position:relative;
  41. z-index:1;
  42. height:40px;
  43. background: rgba(102,102,102,.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="https://www.oneboke.com/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
  68. <li> <a href="https://www.oneboke.com/category/ui/"><span class="font-text"><i class="fa fa-pencil"></i> 设计</span></a></li>
  69. <li> <a href="https://www.oneboke.com/category/web/"><span class="font-text"><i class="fa fa-at"></i> 建站</span></a></li>
  70. <li> <a href="https://www.oneboke.com/1159.html"><span class="font-text"><i class="fa fa-music"></i> 音乐</span></a></li>
  71. <li> <a href="https://www.oneboke.com/notice/shuoshuo/"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
  72. </ul>
  73. </div>

 

如果想改变底部导航字体的颜色,可以修改代码中 37 行,将六位数颜色编码的“#FFFFFF”改成你想要的颜色。

如果想改变导航的背景颜色,可以修改代码 43 行中的(102,102,102,.85),前三位分别是 RGB 颜色编码,.85 表示透明度是 85%,大家可以根据需要自行更改。

如果想更改图标,可以安装 Font Awesome 4 Menus 插件,然后参考:http://www.fontawesome.com.cn/icons-ui/找到你需要的字体图标,复制代码。替换<i></i>标签的代码即可,比如首页的字体图标代码为<i class="fa-home fa"></i> 。

 

#END#

 

 

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

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

目前评论:10   其中:访客  6   博主  4

    • avatar isdola 3

      可以请教一下begin主题具体是怎么实现的吗?我试着操作了一下没成功,能帮我看看问题出在哪里吗?
      首先,我在inc/function.php中添加了评论
      然后,我在footer.php中添加了评论
      接着,我在style.css中添加了评论
      最后,我在后台菜单中新建了一个菜单,在菜单中添加了4个菜单,保存后发现前面并不输出

        • avatar 简单梁 Admin

          @isdola 你现在这个方法我还没试过哦,我是直接用后台的页脚小工具输出的。如果修改原主题文件,建议你检查菜单输出的位置是否正确和css选择器的名称是否正确。

            • avatar biol 1

              @简单梁 后台小工具哪里有增强文本a。。

                • avatar Action Admin

                  @biol begin主题有增强文本,其他主题可以用Wordpress自带的【文本】。

                    • avatar biol 1

                      @Action 成功了,多谢!

                      • avatar 行者 0

                        @Action 麻烦说下怎么添加这个文本,没有找到啊谢谢

                        • avatar Action Admin

                          @行者 没有增强文本的情况,可以把代码放到footer.php文件里。

                  • avatar 楚狂人 1

                    看上去挺美观的

                    • avatar 卡卡 0

                      请教一下这个字体大小是修改哪里呢?谢谢。