[精彩网文] WP移动端增加好看的底部菜单栏

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

页脚文件目录:/wp-content/themes/主题名/footer.php

<!--底部菜单栏开始-->
<style type="text/css">
.nav{
display:none;
}
@media only screen and (max-width:450px){
.site-info{
padding:15px 0 58px 0;
}
#advert_widget, .php_text .widget-text, .widget .textwidget{
padding:0;
}
.nav{
position:fixed;
z-index:999;
bottom:0;
width:100%;
height:40px;
display:block;
right:0;
box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-webkit-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-mox-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-o-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-ms-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
}
.nav{
padding-left:0;
margin-bottom:0;
list-style:none;
}
.nav span{
width:50px !important;
height:50px !important;
}
.font-text {
margin: 0 0 0 5px;
color: #1ba1e2;
}
.nav > ul{
position:relative;
z-index:1;
height:40px;
background: rgba(255,255,255,.85);
list-style-type:none;
margin:0px;
padding:0px!important;
}
.nav  ul  li{
position:relative;
float:left;
width:25%;
text-align:center;
margin:0px;
padding:0px
list-style-type:none;
top:10px;
}
.nav  ul  li a{
display:block;
margin-right:auto;
margin-left:auto;
}
}
</style>
<div class="nav">
<ul>
<li> <a href="/"><span class="font-text"><i class="fa fa-asterisk" aria-hidden="true"></i><span class="font-text">按钮1</span></span></a></li>
<li> <a href="/"><span class="font-text"><i class="fa fa-adjust" aria-hidden="true"></i><span class="font-text">按钮2</span></span></a></li>
<li> <a href="/"><span class="font-text"><i class="fa fa-book" aria-hidden="true"></i><span class="font-text">按钮3</span></span></a></li>
<li> <a href="/"><span class="font-text"><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i><span class="font-text">按钮4</span></span></a></li>
</ul>
</div>
<link rel="stylesheet" href="http://www.sey.ink/font-awesome/css/font-awesome.min.css">
<!--底部菜单结束-->

图标采用Font Awesome,修改图标方法非常简单只需要修改<li></li>中的<i></i>即可,修改图标参照图标代码点我查看支持图标

双击代码进入编辑模式快速全选复制～

此文为修改版,转载标明,原文点我转跳