简单实现侧边栏隐藏与显示

admin1个月前A I94热度

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机端侧边栏（无遮挡）</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: sans-serif; overflow-x: hidden; padding-left: 0; transition: padding-left 0.3s ease;}
/* 内容区补位（避免遮挡） */
body.sidebar-open {padding-left: 260px;}

/* 触发按钮（顶部左侧，不悬浮） */
.sidebar-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #4096ff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 侧边栏（左侧滑，层级合理） */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    padding: 70px 15px 20px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.05);
}
.sidebar.show {transform: translateX(0);}

/* 胶囊菜单项 */
.sidebar-list {list-style: none;}
.sidebar-item {margin-bottom: 10px;}
.sidebar-item a {
    display: block;
    padding: 11px 16px;
    border-radius: 999px;
    color: #555;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.2s ease;
}
.sidebar-item.active a {background: #4096ff; color: #fff;}
.sidebar-item a:hover {background: #f0f5ff; color: #4096ff;}

/* 页面内容示例（验证不遮挡） */
.main-content {
    padding: 70px 15px 20px;
    line-height: 1.6;
    color: #333;
}
</style>
</head>
<body>
<!-- 触发按钮 -->
<button class="sidebar-btn" id="sidebarBtn">☰</button>

<!-- 侧边栏 -->
<div class="sidebar" id="sidebar">
    <ul class="sidebar-list">
        <li class="sidebar-item active"><a href="#">首页</a></li>
        <li class="sidebar-item"><a href="#">商品分类</a></li>
        <li class="sidebar-item"><a href="#">热门推荐</a></li>
        <li class="sidebar-item"><a href="#">金币商城</a></li>
        <li class="sidebar-item"><a href="#">我的订单</a></li>
        <li class="sidebar-item"><a href="#">会员中心</a></li>
        <li class="sidebar-item"><a href="#">个人设置</a></li>
        <li class="sidebar-item"><a href="#">联系客服</a></li>
    </ul>
</div>

<!-- 页面主体内容 -->
<div class="main-content">
    <h3>页面内容区</h3>
    <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
</div>

<script>
const sidebarBtn = document.getElementById('sidebarBtn');
const sidebar = document.getElementById('sidebar');
const body = document.body;

// 切换侧边栏
const toggleSidebar = () => {
    sidebar.classList.toggle('show');
    body.classList.toggle('sidebar-open');
    sidebarBtn.textContent = sidebar.classList.contains('show') ? '×' : '☰';
};

// 绑定事件
sidebarBtn.addEventListener('click', toggleSidebar);
document.querySelectorAll('.sidebar-item a').forEach(link => {
    link.addEventListener('click', toggleSidebar);
});
</script>
</body>
</html>

打赏反馈赞 0

#免责声明#

签名：最忠诚的BUG开发者来自: 重庆市. Chrome浏览器