夏沫博客

WordPress添加好看的移动端底部菜单导航

夏沫

WordPress添加好看的移动端底部菜单导航，以前也分享过一个导航，不过那个不太好看，这里在分享一个导航在电脑端不显示，手机端显示，其它系统程序也可以用，把代码添加到主题的页脚文件就可以啦，CSS样式可能会和你的主题冲突自己改改吧。WordPress添加好看的移动端底部菜单导航

代码:

  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:25%;
  52. text-align:center;
  53. margin:0px;
  54. padding:0px
  55. list-style-type:none;
  56. top:10px;
  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="/"><span class="font-text"><i class="iconfont icon-shouye"></i> <span class="font-text">首页</span></span></a></li>
  68. <li> <a href="javascript:switchNightMode()" target="_self"><span class="font-text"><i class="be be-loader"></i> <span class="font-text">夜间</span></span></a></li>
  69. <li> <a href="https://www.mom1.cn/ql.html"><span class="font-text"><i class="iconfont icon-weiyuqiang-"></i> <span class="font-text">微语</span></span></a></li>
  70. <li> <a href="https://www.mom1.cn/qqo.html"><span class="font-text"><i class="iconfont icon-liuyan"></i> <span class="font-text">留言</span></span></a></li>
  71. </ul>
  72. </div>