#推荐
给自己网站移动端添加下边栏导航菜单详细教程

2022-04-14 0 95
请勿商业运营,违法使用和传播!资源仅供研究学习使用!解压密码为:www.52jyu.cn

给自己网站移动端添加下边栏导航菜单详细教程

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

给自己网站移动端添加下边栏导航菜单详细教程

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

<nav class="nav-shouji">
    <div class="nav-item">
        <div class="img">
            <a href="#"><img src="https://你的网址/img/login.png"></a>
        </div>       
    </div>
    <div class="nav-item">
        <div class="img">
            <a href="#"><img src="https://你的网址/img/tea.png"></a>
        </div>        
    </div>
    <a class="nav-item">
        <div class="img">
            <a href="#"><img src="https://你的网址/img/home.png"></a>
        </div>       
    </a>
    <div class="nav-item">
        <div class="img">
            <a href="#"><img src="https://你的网址/img/bizhi.png"></a>
        </div>        
    </div>
    <div class="nav-item">
        <div class="img">
             <a href="#"><img src="https://你的网址/img/music.png"></a>
        </div>       
    </div>
</nav>

代码中的素材直接右键导出到自己电脑桌面

以上代码中的菜单链接和图标可以自行更改。

然后在CSS文件(大部分css文件是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;
       }

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!305582964@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有U点奖励和额外收入!

静鱼客栈 学习中心 给自己网站移动端添加下边栏导航菜单详细教程 https://www.52jyu.cn/15960.html

静鱼客栈的帅逼站长~

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP贵宾介绍。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器没有下载完整造成的,可以重新进行下载即可~
查看详情

相关文章

猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务