www.xiahuhu.cn
关注网络安全

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

我有话要说:大锅本站免费分享的资源均来自网络,如有侵权及其他事宜请点击联系我处理

看到很多博客移动端底部都有自己的导航菜单,用于展示侧边栏菜单无法展示的页面,我也试了下的确还不错,话不多说看下面的效果展示。

效果展示 

代码展示

<!-- 移动端导航  开始 -->
<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:#FC5550;
}
.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="http://www.xiahuhu.cn/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
<li> <a href="https://www.xiahuhu.cn/articles"><span class="font-text"><i class="fa-twitch fa"></i> 归档</span></a></li>
<li> <a href="https://www.xiahuhu.cn/links"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
<li> <a href="https://www.xiahuhu.cn/guestbook"><span class="font-text"><i class="fa-comment-o fa"></i> 留言</span></a></li>
<li> <a href="https://www.xiahuhu.cn/about-me"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
</ul>
</div>
<!-- 移动端导航  结束 -->

使用方法

直接把代码复制粘贴到当前主题目录的footer.php当中,可以更改导航字体的颜色或者导航背景颜色和透明度。

代码37行 color:#FC5550;可以修改为自己喜欢的颜色。

代码44行 background: rgba(255,255,255,.85);修改导航菜单的背景颜色,85位菜单的透明度,可以按照自己喜好调整。

导航菜单字体前面的小图标也可以根据自己喜好修改,修改位置如下:

替换图标请移步:Font Awesome 中文网

赞(3) 打赏
未经允许不得转载:花生米's Blog » WordPress给移动端底部添加导航菜单
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏