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

 2017年10月14日 08:02  26,736  28  打印本文  
      看到很多博客移动端底部都有单独的导航菜单，体验还不错，九哥亲测可用，这里把实现方法分享给小伙伴们。

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.99bsy.com/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
  68. <li> <a href="http://www.99bsy.com/xinyu.html"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
  69. <li> <a href="http://www.99bsy.com/links.html"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
  70. <li> <a href="http://www.99bsy.com/liuyan.html"><span class="font-text"><i class="fa-comment-o fa"></i> 留言</span></a></li>
  71. <li> <a href="http://www.99bsy.com/about.html"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
  72. </ul>
  73. </div>

使用方法

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

      当然，导航菜单也可以使用图片，小伙伴们可以自行研究，也很简单。

相关推荐：

Wordpress给导航菜单添加鼠标划过特效
      现在很多博客导航都非常炫酷，九哥也是不想千篇一律，这里就分享两种鼠标划过导航菜单的特效教程，效果很炫酷的，小伙伴们可以自行体验下。 特效一 一：设置 后台→外观→菜单，点击右上角的“显示选...
2017年11月12日   12,385   22
阅读全文
weinxin
小算草微信公众号
扫一扫关注小算草微信公众号，打开微信简简单单即可查看小算草所有内容，更快捷更方便。
Mr Y

吐槽一下

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

    • avatar 极乐 这家伙可能用了美佬的代理 搜狗浏览器 Windows 10 美国 【小白】
      回复 2018年12月24日 07:56

      自己移动端的导航很难看，学习了，一会试下！

        • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Windows XP
          回复 2018年12月25日 15:36

          @极乐 嗯嗯，我这个简洁大方，哈哈！

        • avatar KK 来自天朝的朋友 谷歌浏览器 Windows 10 河南省许昌市 电信 【小白】
          回复 2018年11月10日 21:23

          如果想调节窗口的高度，还有图标字体大小，该换哪些参数呢？要是能把每行代码的意思注释下，我们这些不懂代码的小白就知道该怎么替换了！博主能在上一篇带注释版本的教程吗？

            • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Android 8.0.0zh-cn
              回复 2018年11月12日 07:51

              @KK 都是英文，百度下，很简单的。

            • avatar QQ游客 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信 【小白】
              回复 2018年6月28日 12:40

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

                • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Android 8.0.0 STF-AL10 Build/HUAWEISTF-AL10
                  回复 2018年7月1日 09:40

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

                  • avatar KK 来自天朝的朋友 谷歌浏览器 Windows 10 河南省许昌市 电信 【小白】
                    回复 2018年11月10日 21:16

                    @QQ游客 试了下，可以显示，可惜用在我的网站上，总体显得不太搭配，我自己又不懂代码...

                    • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Android 8.0.0zh-cn
                      回复 2018年11月12日 07:50

                      @QQ游客 你的是鸟哥主题吗？其他主题添加到页底文件里面。

                    • avatar Him 来自天朝的朋友 搜狗浏览器 Windows 7 中国 移动 【小白】
                      回复 2018年6月26日 22:05

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

                        • avatar Him 来自天朝的朋友 搜狗浏览器 Windows 7 中国 移动 【小白】
                          回复 2018年6月26日 22:06

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

                          • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Android 8.0.0 STF-AL10 Build/HUAWEISTF-AL10
                            回复 2018年6月28日 07:43

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

                          • avatar 血月刀 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省孝感市 电信 【小白】
                            回复 2018年6月6日 19:07

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

                            • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通 【进士】
                              回复 2017年11月22日 18:40

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

                                • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Windows 7
                                  回复 2017年11月22日 20:15

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

                                • avatar QQ游客 来自天朝的朋友 谷歌浏览器 Windows 7 山东省潍坊市 联通 【书童】
                                  回复 2017年10月18日 16:38

                                  正是我需要的

                                  • avatar 小小参谋 来自天朝的朋友 谷歌浏览器 HUAWEI MT7-TL00 Build/HuaweiMT7-TL00 P1 6.0 北京市 移动 【书童】
                                    回复 2017年10月17日 11:30

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

                                    • avatar 电炖锅的那些事 来自天朝的朋友 搜狗浏览器 Windows 7 湖南省长沙市 电信 【小白】
                                      回复 2017年10月17日 10:59

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

                                      • avatar 小萝博客 来自天朝的朋友 谷歌浏览器 Windows 10 江西省赣州市 电信 【小白】
                                        回复 2017年10月16日 11:25

                                        这样方便多了 :wink:

                                          • avatar 九哥 站长 来自天朝的朋友 QQ浏览器 Windows 7
                                            回复 2017年10月16日 12:47

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

                                          • avatar 懿古今 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信 【进士】
                                            回复 2017年10月16日 10:59

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

                                              • avatar 九哥 站长 来自天朝的朋友 谷歌浏览器 Android 7.0 Mi-4c Build/NRD90M
                                                回复 2017年10月16日 11:12

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

                                              • avatar Koolight 来自天朝的朋友 Safari浏览器 Android 6.0 PE-CL00 Build/HuaweiPE-CL00 湖北省武汉市 联通 【进士】
                                                回复 2017年10月16日 00:21

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

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

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

                                                  • avatar 伏笔 来自天朝的朋友 QQ浏览器 Windows 10 广东省东莞市 电信 【小白】
                                                    回复 2017年10月14日 08:12

                                                    噢 学习学习