前端开发教程:底部上拉菜单导航隐藏功能实现

5
(1)
底部上拉菜单导航通常用于移动端网站,能够根据用户滚动或其他触发条件隐藏或显示。下面是实现这个功能的 HTML、CSS 和 JavaScript 代码。

功能实现

前端开发教程:底部上拉菜单导航隐藏功能实现 以下是一个简单的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部菜单导航</title>
</head>
<style>
body {
    height: 1200px;
    margin: 0;
    font-family: Arial, sans-serif;
}

.content {
    padding: 20px;
    text-align: center;
}

.footer {
    position: fixed;
    bottom: -100px; /* 默认隐藏菜单 */
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    transition: bottom 0.3s ease;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer ul li {
    display: inline-block;
    margin: 10px;
}

.footer ul li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}
</style>
<body>
    <div class="content">
        <h1>欢迎访问我的网站</h1>
        <p>请滚动页面以查看底部菜单。</p>
    </div>

    <div class="footer" id="footerMenu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>

    <script>
        const footer = document.getElementById('footerMenu');
        
        window.addEventListener('scroll', function() {
            if (window.scrollY > 100) {
                footer.style.bottom = '0';  // 显示底部菜单
            } else {
                footer.style.bottom = '-100px';  // 隐藏底部菜单
            }
        });
    </script>
</body>
</html>

 

总结

底部上拉菜单通过使用 position: fixedJavaScript 监听滚动事件来显示和隐藏底部导航菜单。

文章目录

共计1人评分,平均5

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

告诉我们如何改善这篇文章?

文章标题:前端开发教程:底部上拉菜单导航隐藏功能实现
更新时间:2025年02月12日 17时07分07秒
文章链接:https://www.sokb.cn/soyi-4245.html
文章版权:易搜资源网所发布的内容,部分为原创文章,转载注明来源,网络转载文章如有侵权请联系我们!
Like (1)
Previous 2024 年 11 月 11 日 下午3:55
Next 2024 年 11 月 11 日 下午5:31

相关推荐

发表回复

Please Login to Comment