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

郑重承诺丨优站网提供安全交易、信息保真!
增值服务:
自动发货
网盘下载
安装指导
环境配置
二次开发
网站建设
¥ 0 (VIP免费升级VIP开通VIP尊享优惠特权
立即下载 升级会员 购买教程 售后支持
详情介绍

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

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

纯代码为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: #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="http://www.zhanceo.com/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
<li> <a href="https://www.zhanceo.com/xinyu.html"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
<li> <a href="https://www.zhanceo.com/links.html"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
<li> <a href="https://www.zhanceo.com/liuyan.html"><span class="font-text"><i class="fa-comment-o fa"></i> 留言</span></a></li>
<li> <a href="https://www.zhanceo.com/about.html"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
</ul>
</div>

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

资源下载此资源仅限注册用户下载,请先
客服QQ:1427707223
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明   ⚠️ 1. 本站所有资源来源于网络收集,若资源侵犯了您的合法权益, 请来信通知我们(Email: 1427707223@qq.com),我们会及时删除,给您带来的不便,我们深表歉意! 2. 分享目的仅供大家学习和交流,若使用商业用途,请购买正版授权! 否则产生的一切后果将由下载用户自行承担! 3. 会员不得使用于非法商业用途,不得违反国家法律。否则后果自负! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 6. 因源码具有可复制性,一经购买 ,不得以任何形式退款。 7.更多详情请点击查看

优站网 WordPress教程 纯代码为WordPress移动端底部添加菜单栏功能 https://www.zhanceo.com/20421.html

诚乃立身之本、信为道德之基

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务

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