为网站手机移动端添加下边栏导航菜单
侧边栏壁纸
  • 累计撰写 78 篇文章
  • 累计收到 292 条评论
    love love love

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

李哲
2022-05-21 / 12548 评论 / 2,474 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年09月28日,已超过435天没有更新,若内容或图片失效,请留言反馈。

折腾了好几个星期终于实现了,太不容易了。给网站手机移动端添加下边栏,非常简单的实现方式,下面直接上教程。

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

<nav class="nav-shouji">
    <div class="nav-item">
        <div class="img">
            <a href="https://laolion.com/admin/login.php"><img src="https://laolion.com/img/login.png"></a>
        </div>       
    </div>
    <div class="nav-item">
        <div class="img">
            <a href="https://laolion.com/shuo.html"><img src="https://laolion.com/img/tea.png"></a>
        </div>        
    </div>
    <a class="nav-item">
        <div class="img">
            <a href="https://laolion.com/"><img src="https://laolion.com/img/home.png"></a>
        </div>       
    </a>
    <div class="nav-item">
        <div class="img">
            <a href="https://laolion.com/contribute.html"><img src="https://laolion.com/img/bizhi.png"></a>
        </div>        
    </div>
    <div class="nav-item">
        <div class="img">
             <a href="https://laolion.com/music.html"><img src="https://laolion.com/img/music.png"></a>
        </div>       
    </div>
</nav>

以上代码中的菜单链接和图标可以自行更改。
然后在 CSS 文件(JOE主图的CSS文件是在 assets/css/joe.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;
       }
5

评论 (12548)

取消
  1. 头像
    ๛落梦
    Linux · Google Chrome

    两小儿辩日,一儿曰:一天就是一日!一儿曰:一日就是一天!

    回复