純代碼給wordpress移動端添加浮動底部菜單

  • A+
所屬分類:滴滴發展史

五一到處都是人,就宅家裏了。現在移動端的流量是主流,在上次朋友的分享會中,不少企業家朋友還停留在官方PC端網站方麵。這對潛在客戶絕對是極大損失。這是題外話。
 

重點兒在移動端,就要做好移動端的用戶體驗。這已經不是粗糙的年代了。效果圖如下:

mobiles-menu

分享源代碼,有需要的朋友可以用,本站已經更新,可以在移動端打開看效果:

  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. bottombottom:0;  
  16. width:100%;  
  17. height:40px;  
  18. display:block;  
  19. rightright: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: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="tel:18873267314"><span class="font-text"><i class="fa fa-phones"></i> 電話交流</span></a></li>  
  68. <li> <a href="/add-weixin.html"><span class="font-text"><i class="fa fa-weixin"></i> 加微信</span></a></li>  
  69. <li> <a href="/gong-yi.html"><span class="font-text"><i class="fa fa-child"></i> 小小公益</span></a></li>  
  70. <li> <a href="/xuan-xing/969.html"><span class="font-text"><i class="fa-info fa"></i> 人工選型</span></a></li>  
  71. </ul>  
  72. </div>  

使用方法

後台→外觀→小工具→增強文本→頁腳小工具→內容:複製粘貼以上代碼保存即可。

當然,目的也是單純、高效的,方便潛在客戶直接溝通,而不是原先左上角的默認菜單。

weinxin
ASIA GAME
我成功組建了機械設備網絡資源聯盟,機械設備朋友互幫互助,讓你的搶單效果*10倍,需要的朋友加微信聯係我
機械營銷
avatar

發表評論

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