技术

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

看到很多博客移动端底部都有单独的导航菜单，体验还不错，导航可以是图片的，也可以修改为文字，电脑端不显示，只在手机端显示，其它系统程序自己调整应该也可以使用，如果是使用begin主题把代码添加到页脚footer-widget.php文件中就可以，这里把实现方法分享给小伙伴们。

图片版代码:

  1. <style type="text/css">.nav{display:none;}@media only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.nav{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav img{width:50px !important;height:50px !important;}.nav > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.85);list-style-image:none;list-style-type:none;margin:0px;padding:0px !important;}.nav ul li{position:relative;float:left;width:20%;text-align:center;margin:0px;padding:0px;list-style-image:none;list-style-type:none;top:0px;left:3%;}.nav ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>
  2. <div class="nav">
  3. <ul>
  4. <li> <a href="https://mlsha.cn/"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp17m7sbzuj202s02smx1.jpg"></a> </li>
  5. <li> <a href=""https://mlsha.cn/wy"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp1tksixe7j202s02s0sl.jpg"></a> </li>
  6. <li> <a href="https://mlsha.cn/music/"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp1tnw1p76j202s02sweb.jpg"></a> </li>
  7. <li><a href="a href="https://mlsha.cn/links"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp17fp19z6j202s02sa9x.jpg"></a> </li>
  8. <li> <a href="https://mlsha.cn/about.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp16ww30rhj202s02sglh.jpg"></a> </li>
  9. </ul>
  10. </div>

文字版代码

  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="https://mlsha.cn/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
  68. <li> <a href="https://mlsha.cn/wy"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
  69. <li> <a href="https://mlsha.cn/links"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
  70. <li> <a href="https://mlsha.cn/music/"><span class="font-text"><i class="fa-headphones fa"></i> 音乐</span></a></li>
  71. <li> <a href="https://mlsha.cn/about.html"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
  72. </ul>
  73. </div>

使用方法

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

相关推荐

wordpress文章部分内容加密功能的实现方法
技术 2023-04-28

wordpress文章部分内容加密功能的实现方法

目前wordpress文章的可见性可以设置全部公开，也可以设置密码保护。但是如果是想实现文章的一部分内容加密，需要输入密码才能全部可见的话又如何实现呢？ 最简单的方法莫过于使用短代码，网上很多要求关注公众号 ...

筹码力度副图及选股公式
技术 2023-05-29

筹码力度副图及选股公式

副图指标 DRAWGBK(CLOSE>OPEN,RGB(40,40,40),RGB(40,40,40),1,2,1); NOTEXT箱底:LLV(MA((LOW+HIGH+CLOSE+OPEN)/4,6),88),COLORGREEN,LINETHICK2; X_1:=EMA((HIGH+LOW+CLOSE)/3*(HHV(HIGH,10)-CLOSE)/(HHV(HIG ...

通达信主力控盘主图指标源码
技术 2023-03-24

通达信主力控盘主图指标源码

主力控盘主图指标 {阻力支撑线} V1:=ABS((2*CLOSE+HIGH+LOW)/4-EMA(CLOSE,20))/EMA(CLOSE,20); V2:=(1-7/100)*(DMA(CLOSE,V1)); V3:=(1+7/100)*(DMA(CLOSE,V1)); V5:=EMA((LOW+HIGH+CLOSE)/3,5); 支撑:REFDATE(V ...

小米ax3600官方固件安装adguardhome
技术 2022-11-15

小米ax3600官方固件安装adguardhome

小米ax3600路由器開啟SSH權限後就可以安裝插件了，目前使用最多的莫過於于shellclash+adguardhome，第一個shellclash安裝過於簡單，就一行代碼的事情，這裡就不過多贅述。adguardhome是一款非常好用的去廣告程序 ...

暂无评论

发表评论