纯代码为WordPress移动端底部添加菜单栏功能

前一阶段一直在想什么时候给公司网站写一个新的移动界面。今天终于有时间处理了。然后突然想到底部的 nav 菜单栏功能，于是就顺手写了这个功能。一般来说，它一般，只是一个简单的 html 代码和css样式。

直到快下班的时候才突然想起来:前段时间 robin 的 begin 主题好像加了这个功能，比较完善(菜单栏默认不显示，放到某个位置才会显示)。所以晚上有空的时候查了一下元素，发现挺简单的，就简单移植到狮子座主题。

废话不多说，直接上代码：

<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:20%;
text-align:center;
margin:0px;
padding:0px
list-style-type:none;
top:5px;
}
.nav  ul  li a{
display:block;
margin-right:auto;
margin-left:auto;
}
}
</style>
<div class="nav">
<ul>
<li> <a href="https://www.huizhanii.com/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
<li> <a href="https://www.huizhanii.com/xinyu.html"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
<li> <a href="https://www.huizhanii.com/links.html"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
<li> <a href="https://www.huizhanii.com/liuyan.html"><span class="font-text"><i class="fa-comment-o fa"></i> 留言</span></a></li>
<li> <a href="https://www.huizhanii.com/about.html"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
</ul>
</div>

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

转载请注明：汇站网 » 纯代码为 WordPress 移动端底部添加菜单栏功能