WordPress教程—手机浏览时屏幕下方显示导航菜单美化

陈鑫威Blog 1,901 10
前言

最近用手机逛博客,浏览好多博客时发现屏幕下方显示非常好看的导航菜单,现分享给大家。

WordPress教程—手机浏览时屏幕下方显示导航菜单美化

代码部署:

后台→外观→主题选项→定制风格→自定义样式,复制下面的代码粘贴就OK。

  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:52px;
  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 img{
  32. width:50px !important;
  33. height:50px !important;
  34. }
  35. .nav > ul{
  36. position:relative;
  37. z-index:1;
  38. height:52px;
  39. background: rgba(255,255,255,.85);
  40. list-style-image:none;
  41. list-style-type:none;
  42. margin:0px;
  43. padding:0px!important;
  44. }
  45. .nav  ul  li{
  46. position:relative;
  47. float:left;
  48. width:20%;
  49. text-align:center;
  50. margin:0px;
  51. padding:0px
  52. list-style-image:none;
  53. list-style-type:none;
  54. top:0px;
  55. left:3%;
  56. }
  57. .nav  ul  li a{
  58. display:block;
  59. margin-right:auto;
  60. margin-left:auto;
  61. }
  62. }
  63. </style>
  64. <div class="nav"><ul><li> <a href="http://iav6.cn/"><img src="http://wx2.sinaimg.cn/large/006VCrUsgy1fjkn21g48hj302s02s0sk.jpg"></a></li><li> <a href="http://iav6.cn//guanyuboke.html"><img src="http://wx3.sinaimg.cn/large/006VCrUsgy1fjkn20lbjlj302s02sweb.jpg"></a></li><li> <a href="http://iav6.cn/zaixianliuyan/"><img src="http://wx1.sinaimg.cn/large/006VCrUsgy1fjkn210pkdj302s02sweg.jpg"></a></li><li> <a href="http://iav6.cn/mood/"><img style="animation: blink 1.0s linear infinite;" src="http://wx2.sinaimg.cn/large/006VCrUsgy1fjkn21w6i1j302s02sa9w.jpg"></a></li><li> <a href="https://iav6.cn/links/"><img src="http://wx4.sinaimg.cn/large/006VCrUsgy1fjkn22o3gej302s02sdfo.jpg"></a></li></ul></div>

 

效果图:

WordPress教程—手机浏览时屏幕下方显示导航菜单美化

如果没有效果,那么可以按下面的方法重新部署代码:

后台→外观→小工具→页脚小工具→插入:增强文本(复制粘贴代码)保存即可。

 

打赏
发表评论
表情 图片 链接 代码

  1. 夏天烤洋芋

    感谢分享了。[aru_4]

  2. 昼夜赚
    昼夜赚 Lv 1

    来看看

  3. 易发网
    易发网 Lv 1

    wordpress暂时还没用过,教程分享的不错[色]

    • 陈鑫威Blog
      陈鑫威Blog 站长

      @易发网谢谢您的支持。[aru_53]

  4. 憧憬点滴记忆

    感觉有点不习惯 加这个[aru_2]

    • 陈鑫威Blog
      陈鑫威Blog 站长

      @憧憬点滴记忆快捷很多,可以修改图片样式,换成自己喜欢的,还是很方便的。

  5. 懿古今
    懿古今 Lv 2

    看来这个以后可能是主流,确实很多博客都加有这个功能

    • 陈鑫威Blog
      陈鑫威Blog 站长

      @懿古今喜欢捣鼓的还可以自己修改图片样式,不过还是有人不喜欢,觉得太丑[aru_77]

分享
微信
微博
QQ