排行榜 统计
  • 文章总数:31 篇
  • 评论总数:6 条
  • 分类总数:8 个
  • 最后更新:5月8日

实现手机端下方添加导航按钮

本文阅读 1 分钟
首页 教程/笔记 正文

适用于Ty、WP等主题,推荐Joe,其他也可以的。

预览图

1、修改页脚footer.php文件,Joe在:pubilc/footer.php

在页脚文件footer.php或者foot.php最下方添加以下代码:

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="https://www.zmr666.com/"> <span class="cyicon chenyu-yu"></span> 首页 </a></li>
        <li> <a href="https://www.zmr666.com/"> <span class="cyicon chenyu-106collect"></span> 关于 </a></li>
        <li> <a href="https://www.zmr666.com/"> <span class="cyicon chenyu-weiyuqiang-"></span> 动态 </a></li>
        <li> <a href="https://www.zmr666.com/"> <span class="cyicon chenyu-ganxie"></span> 排行榜 </a></li>
        <li> <a href="https://www.zmr666.com/"> <span class="cyicon chenyu-daohang"></span> 导航 </a></li>
    </ul>
</div>

2.修改include.php文件

在/usr/themes/Joe/public/include.php的19-29行之间新增如下代码:

<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/cysjdh.css'); ?>">

3.新增cysjdh.css文件

在/usr/themes/Joe/assets/css/路径下新增cysjdh.css文件,内容如下:

@import url("//at.alicdn.com/t/font_2611504_8nq4wp1bmb3.css");
@media screen and (min-width:767px){#mobile-footer{display:none}}
#mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999}
#mobile-menu{display:block}
#mobile-menu:after{content:'';display:block;height:0;clear:both}
#mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%}
#mobile-menu>li>a:hover{color:#000;}
#mobile-menu>li>.active{color:#000;}
#mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%}
#mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}

如果菜单挡住了原内容,在后面加上
即可!

</footer>
<br><br>
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://a7a7.net/39.html
仿网站无法访问源码
« 上一篇 04-26
如何在WordPress文章顶端或者末尾插入固定内容?
下一篇 » 04-26

发表评论

成为第一个评论的人

作者信息

动态快讯

换一换
    请配置好页面缩略名选项

热门文章

标签TAG

热评文章