TypechoJoeTheme

老狮的梦

统计
登录
用户名
密码
/
注册
用户名
邮箱
输入密码
确认密码

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

老狮博主
2021-01-15
/
0 评论
/
506 阅读
/
118 个字
/
百度已收录
01/15
本文最后更新于2021年01月15日,已超过160天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

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

首先,在页脚文件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;
       }
美化代码下边栏
朗读
赞(9)
赞赏
感谢您的支持,我会继续努力哒!
版权属于:

老狮的梦

本文链接:

https://laolion.com/archives/2444.html(转载时请注明本文出处及文章链接)

评论 (0)

互动读者

  • 神话2闲逛

    评论 7 次 | 文章 0 篇

  • 111闲逛

    评论 3 次 | 文章 0 篇

  • ptcry闲逛

    评论 3 次 | 文章 0 篇

  • 火喵闲逛

    评论 2 次 | 文章 0 篇

标签云

最新回复

  1. 路过闲逛
    2021-06-24
  2. 88闲逛
    2021-06-23
  3. 萨达萨达按时闲逛
    2021-06-23
  4. 神话6闲逛
    2021-06-23
  5. 神话2闲逛
    2021-06-21