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

 2017年10月14日 08:02  6,746  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给导航菜单添加鼠标划过特效
      现在很多博客导航都非常炫酷,九哥也是不想千篇一律,这里就分享两种鼠标划过导航菜单的特效教程,效果很炫酷的,小伙伴们可以自行体验下。 特效一 一:设置 后台→外观→菜单,点击右上角的“显示选...
阅读全文
weinxin
99八十一微信公众号
扫一扫关注99八十一微信公众号,打开微信简简单单即可查看99八十一所有内容,更快捷更方便。
九哥

吐槽一下

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

目前吐槽:28   其中:访客  16   博主  12

    • avatar 极乐 这家伙可能用了美佬的代理 搜狗浏览器 Windows 10 美国 【小白】

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

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

          @极乐 嗯嗯,我这个简洁大方,哈哈!

        • avatar KK 来自天朝的朋友 谷歌浏览器 Windows 10 河南省许昌市 电信 【小白】

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

            • avatar 九哥 博主 来自天朝的朋友 QQ浏览器  Android 8.0.0zh-cn

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

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

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

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

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

                  • avatar KK 来自天朝的朋友 谷歌浏览器 Windows 10 河南省许昌市 电信 【小白】

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

                    • avatar 九哥 博主 来自天朝的朋友 QQ浏览器  Android 8.0.0zh-cn

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

                    • 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 广东省东莞市 电信 【小白】

                                                      噢 学习学习