如何为WordPress移动端底部添加自适应菜单功能按钮?

 2019-03-13 22:07:19  152 人阅读  1 条评论
 最佳答案:

WordPress 站点的菜单一般都是在顶部,不过也有一些是将常用功能菜单放在底部以便用户点击使用,那么如何在 WordPress 站点的移动端底部添加自适应菜单功能按钮呢?我们只需要将以下代码添加到当前主题的 footer.php 页脚文件的最后即可(PS:独立手机模板就把代码添加到手机首页模板页内)。

<style type="text/css">.nav{display:none;}@media only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.nav{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav img{width:50px !important;height:50px !important;}.nav > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.150);list-style-image:none;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-image:none;list-style-type:none;top:0px;left:3%;}.nav ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>
<div class="nav">
<ul>
<li><a href="http://www.xcsos.cn"><img src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye.png" /></a></li>
<li><a href="/ruanjian"><img src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-1.png" /></a></li>
<li><a href="/wzym"><img src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-2.png" /></a></li>
<li><a href="/link.html"><img style="animation: blink 1.0s linear infinite;" src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-3.png" /></a></li>
<li><a href="/er"><img style="animation: blink 1.0s linear infinite;" src="http://www.xcsos.cn/wp-content/uploads/2019/03/shouye-4.png" /></a></li>
</ul>
</div>

说明:

  • 自行修改上面的页面链接和图片链接,图片自己修改或本地化,请勿调用小虫的按钮图片链接,以免删除更改后失效;
  • 源码为自适应,适用任何网页程序;
  • 底部导航颜色小虫改的透明颜色,修改 background:rgba(255,255,255,.150);最后一个数值,数值越小透明度越低,也可自定义别的颜色,如白色:background:#ffffff;
  • style="animation: blink 1.0s linear infinite;"图片闪烁代码,0s 时间,可删除或按照源码格式设置某个图标闪烁。

具体效果如下:

如何为WordPress移动端底部添加自适应菜单功能按钮?  第1张

源码来自互联网,小虫部分修改美化

拓展阅读

答案来自:小虫博客 - http://www.xcsos.cn/wzym/wpzt/655.html

您可能感兴趣的文章

问题标签: ,  更多问题标签>>
编辑作者:懿古今(QQ号:2226524923,QQ群:415623933
免责声明:本文内容来源于互联网,仅供参考学习之用,如有侵权请联系本站修改删除!
问题分类:WordPress问题 ,  建站技术问题 ,  操作系统问题 ,  办公软件问题 ,  搜索热点问题 ,  综合其他问题
©boke112导航,本站推荐使用:阿里云 ECS服务器等云产品服务,国外免备案主机建议使用:老薛主机

 发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. wordpress建站吧
    wordpress建站吧 @回复

    还是比较实用的,小工具