WordPress添加好看的移动端底部菜单导航

WordPress添加好看的移动端底部菜单导航

前言:

一个WordPress添加好看的移动端底部菜单导航，如果对你有帮助就看看吧。

正文:

以前也分享过一个导航，不过那个不太好看，这里在分享一个导航在电脑端不显示，手机端显示，其它系统程序也可以用，

把代码添加到主题的页脚文件就可以啦，CSS样式可能会和你的主题冲突自己改改吧。

实例代码:

<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;

bottombottom:0;

width:100%;

height:40px;

display:block;

rightright: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="iconfont icon-shouye"></i> <span class="font-text">首页</span></span></a></li>

<li> <a href="javascript:switchNightMode()" target="_self"><span class="font-text"><i class="be be-loader"></i> <span class="font-text">夜间</span></span></a></li>

<li> <a href="https://www.aidezy.com/ql.html"><span class="font-text"><i class="iconfont icon-weiyuqiang-"></i> <span class="font-text">微语</span></span></a></li>

<li> <a href="https://www.aidezy.com/qqo.html"><span class="font-text"><i class="iconfont icon-liuyan"></i> <span class="font-text">留言</span></span></a></li>

</ul>

</div>