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;
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="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.mom1.cn/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.mom1.cn/qqo.html"><span class="font-text"><i class="iconfont icon-liuyan"></i> <span class="font-text">留言</span></span></a></li>
</ul>
</div>
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
© 版权声明
本站网络名称:
孤勇者社区
本站永久网址:
https://www.gyzsq.com
网站侵权说明:
本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ324470778删除处理。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
THE END
喜欢就支持一下吧
相关推荐
评论 共1条
![头像](/wp-content/themes/zibll/img/avatar-default.png)
欢迎您留下宝贵的见解!
- 最新
- 最热
只看作者