TypechoJoeTheme

尘遇 logo

当我遇上你
排行榜
统计

网站手机移动端添加下边栏导航菜单

醉书生站长
6个月前
30 评论
499 阅读
检测收录...
01/20
本文最后更新于2021年06月23日,已超过39天没有更新,若内容或图片失效,请留言反馈。

手机端访问的时候,给网站手机移动端添加下边栏,非常简单的实现方式,下面直接上教程。
本站有两个版本,一个是图片版本,一个是icon图标版本。

图片版本

本站以前所使用的版本,主要修改两个文件:

修改footer.php

首先,在页脚文件foot.php或者footer.php文件的最下面放入以下代码:

<nav class="nav-shouji">
    <div class="nav-item">
        <div class="img">
            <a href="https://chenyu.me/category/default/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj1.png"></a>
        </div>       
    </div>
    <div class="nav-item">
        <div class="img">
            <a href="https://chenyu.me/category/web/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj2.png"></a>
        </div>        
    </div>
    <a class="nav-item">
        <div class="img">
            <a href="https://chenyu.me/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj.png"></a>
        </div>       
    </a>
    <div class="nav-item">
        <div class="img">
            <a href="https://chenyu.me/photo/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj3.png"></a>
        </div>        
    </div>
    <div class="nav-item">
        <div class="img">
             <a href="https://chenyu.me/dh/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj4.png"></a>
        </div>       
    </div>
</nav>

以上代码中的菜单链接和图标可以自行更改,图标分辨率为48x48。

修改joe.min.css

然后在CSS文件
JOE 4.7.7及以下老版:CSS文件是在assets/css/joe.min.css)里最下面放入以下代码即可。
JOE 7.X.X及以上新版:joe.global.min.css或joe.normalize.min.css最下面加入。

当然,最好的操作是以上文件的同名.scss文件里编辑然后生成.min.css的文件!(这句话看不懂的可以略过!)

/*手机端底部菜单*/
@media (min-width: 768px) {
    .nav-shouji {
        display: none !important;
    }
}
.nav-shouji{
            display: flex;
            position: fixed;
            bottom:0;
            z-index:99;
            height: 55px;
            width: 100%;
            background: var(--background);
            flex-shrink: 0;
            font-size: 14px;
        }
        .nav-shouji .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            color: var(--main);
        }       
        .nav-item:nth-child(3) {
            transform: translateY(-20px);
            background: var(--background);
            border-radius: 50%;
            height: 75px;
            width: 75px;
            flex-shrink: 2;
            box-shadow: 0 -3px 4px rgba(0,0,0,.1);
        }
        .nav-shouji .nav-item .img {
            height: 24px;
            overflow: hidden;
        }
        .nav-item:nth-child(3)>.img{
            height: 30px;
            margin-bottom: 5px;            
        }
        .nav-shouji .nav-item img {
            width: 24px;
            height: 24px;
            overflow: hidden;
       }

icon图标版本

本站现在所使用的版本,手机访问本站即可看见!

1.修改footer.php

首先,在页脚文件foot.php或者footer.php文件的最下面放入以下代码:
备注:Joe主题的路径为/usr/themes/Joe/public/footer.php

一蓑一笠一孤舟,万里江山独自游;有人问我红尘事,坐等回复不点头

2.修改include.php

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

一蓑一笠一孤舟,万里江山独自游;有人问我红尘事,坐等回复不点头

3.新增cysjdh.css

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

一蓑一笠一孤舟,万里江山独自游;有人问我红尘事,坐等回复不点头

如果底部菜单挡住了原底部的内容,在</footer>标签后面加两个<br>即可,如:

</footer>
<br><br>
本文共357个字数,您已阅读:平均阅读时长≈1分钟。
Typecho
朗读
点赞
2
赞赏
海报
人生
欢迎
要时间嘉许,等春风得意,我正好遇上你!

微信/QQ/支付宝三合一收款码

微信
QQ
支付宝
打开微信/QQ/支付宝扫一扫,即可进行扫码打赏!
版权属于:

尘遇

最后修改:

2021 年 06 月 23 日 02 : 39 PM

本文链接:

https://chenyu.me/1140.html(转载时请注明本文出处及文章链接)

已有 30 条评论
  1. 鑫旺秀才 作者
    Windows 10 · QQ Browser
    沙发

    2021-07-31 02:54 回复
  2. 腾飞博客秀才 作者
    iPhone · QQ Browser
    板凳

    2021-07-30 22:13 回复
  3. Qoo秀才 作者
    Windows 10 · Google Chrome
    地毯

    看看

    2021-07-24 03:23 回复
  4. 茗总秀才 作者
    Windows X64 · Safari
    门口

    牛逼

    2021-07-22 19:14 回复
  5. 123秀才 作者
    Windows 10 · Google Chrome
    走廊

    看看

    2021-07-20 17:10 回复
  6. 123秀才 作者
    Windows 10 · Google Chrome
    楼梯

    6

    2021-07-14 20:44 回复
  7. 花悟秀才 作者
    Windows 10 · QQ Browser
    宅院

    来学习了

    2021-07-12 16:23 回复
  8. 予澈举人 作者
    Windows 10 · Google Chrome
    小区

    看看

    2021-07-11 10:03 回复
  9. 666666秀才 作者
    Windows 10 · Google Chrome
    街道

    看看

    2021-07-06 21:31 回复
  10. 股表秀才 作者
    Windows 10 · Google Chrome
    第10号大院

    看看

    2021-07-05 22:09 回复
  11. 火喵举人小伙伴 作者
    Windows 10 · Google Chrome
    第11号大院

    哇!这个好棒

    2021-07-03 21:04 回复
  12. 1秀才 作者
    Android Oreo · Google Chrome
    第12号大院

    拿走了

    2021-06-28 10:21 回复
  13. 3296230540秀才 作者
    Android Oreo · QQ Browser
    第13号大院

    牛逼

    2021-06-24 15:14 回复
  14. 秀才 作者
    Android · Google Chrome
    第14号大院

    查看

    2021-06-23 15:47 回复
  15. 诺言秀才 作者
    Android · QQ Browser
    第15号大院

    不错呀。

    2021-06-20 00:47 回复
  16. 88秀才 作者
    Windows 10 · Google Chrome
    第16号大院

    来瞧瞧

    2021-06-17 22:38 回复
  17. 乔治秀才 作者
    Android · Google Chrome
    第17号大院

    厉害了

    2021-06-17 15:58 回复
    1. 醉书生榜眼站长 作者
      Windows 10 · Google Chrome
      @乔治

      欢迎小伙伴的回访!

      2021-06-17 16:12 回复
  18. 乔治秀才小伙伴 作者
    Android · Google Chrome
    第18号大院

    看看

    2021-06-17 15:43 回复
  19. 腾飞秀才 作者
    iPhone · Safari
    第19号大院

    2021-06-17 09:21 回复
  20. chenmo秀才 作者
    Windows 10 · Google Chrome
    第20号大院

    这个可以有。

    2021-06-16 10:54 回复

光阴者,百代之过客

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. 腾飞博客秀才
    2021-07-31

    1

  2. 腾飞博客秀才
    2021-07-31

    1

  3. 腾飞博客秀才
    2021-07-31

    1

  4. 鑫旺秀才
    2021-07-31
  5. 鑫旺秀才
    2021-07-31