酷秀博客
首页/简单实现侧边栏隐藏与显示A I

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

admin的头像admin3个月前A I130热度 

<!DOCTYPE html><br />
<html lang="zh-CN"><br />
<head><br />
<meta charset="UTF-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<title>手机端侧边栏（无遮挡）</title><br />
<style><br />
* {margin: 0; padding: 0; box-sizing: border-box;}<br />
body {font-family: sans-serif; overflow-x: hidden; padding-left: 0; transition: padding-left 0.3s ease;}<br />
/* 内容区补位（避免遮挡） */<br />
body.sidebar-open {padding-left: 260px;}<br />
<br />
/* 触发按钮（顶部左侧，不悬浮） */<br />
.sidebar-btn {<br />
    position: fixed;<br />
    top: 15px;<br />
    left: 15px;<br />
    width: 40px;<br />
    height: 40px;<br />
    border-radius: 50%;<br />
    background: #fff;<br />
    color: #4096ff;<br />
    border: none;<br />
    font-size: 20px;<br />
    cursor: pointer;<br />
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);<br />
    z-index: 1002;<br />
    display: flex;<br />
    align-items: center;<br />
    justify-content: center;<br />
}<br />
<br />
/* 侧边栏（左侧滑，层级合理） */<br />
.sidebar {<br />
    position: fixed;<br />
    top: 0;<br />
    left: 0;<br />
    width: 260px;<br />
    height: 100vh;<br />
    background: #fff;<br />
    transform: translateX(-100%);<br />
    transition: transform 0.3s ease;<br />
    z-index: 1001;<br />
    padding: 70px 15px 20px;<br />
    box-shadow: 2px 0 10px rgba(0,0,0,0.05);<br />
}<br />
.sidebar.show {transform: translateX(0);}<br />
<br />
/* 胶囊菜单项 */<br />
.sidebar-list {list-style: none;}<br />
.sidebar-item {margin-bottom: 10px;}<br />
.sidebar-item a {<br />
    display: block;<br />
    padding: 11px 16px;<br />
    border-radius: 999px;<br />
    color: #555;<br />
    text-decoration: none;<br />
    font-size: 15px;<br />
    transition: all 0.2s ease;<br />
}<br />
.sidebar-item.active a {background: #4096ff; color: #fff;}<br />
.sidebar-item a:hover {background: #f0f5ff; color: #4096ff;}<br />
<br />
/* 页面内容示例（验证不遮挡） */<br />
.main-content {<br />
    padding: 70px 15px 20px;<br />
    line-height: 1.6;<br />
    color: #333;<br />
}<br />
</style><br />
</head><br />
<body><br />
<!-- 触发按钮 --><br />
<button class="sidebar-btn" id="sidebarBtn">☰</button><br />
<br />
<!-- 侧边栏 --><br />
<div class="sidebar" id="sidebar"><br />
    <ul class="sidebar-list"><br />
        <li class="sidebar-item active"><a href="#">首页</a></li><br />
        <li class="sidebar-item"><a href="#">商品分类</a></li><br />
        <li class="sidebar-item"><a href="#">热门推荐</a></li><br />
        <li class="sidebar-item"><a href="#">金币商城</a></li><br />
        <li class="sidebar-item"><a href="#">我的订单</a></li><br />
        <li class="sidebar-item"><a href="#">会员中心</a></li><br />
        <li class="sidebar-item"><a href="#">个人设置</a></li><br />
        <li class="sidebar-item"><a href="#">联系客服</a></li><br />
    </ul><br />
</div><br />
<br />
<!-- 页面主体内容 --><br />
<div class="main-content"><br />
    <h3>页面内容区</h3><br />
    <p>测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p><br />
</div><br />
<br />
<script><br />
const sidebarBtn = document.getElementById('sidebarBtn');<br />
const sidebar = document.getElementById('sidebar');<br />
const body = document.body;<br />
<br />
// 切换侧边栏<br />
const toggleSidebar = () => {<br />
    sidebar.classList.toggle('show');<br />
    body.classList.toggle('sidebar-open');<br />
    sidebarBtn.textContent = sidebar.classList.contains('show') ? '×' : '☰';<br />
};<br />
<br />
// 绑定事件<br />
sidebarBtn.addEventListener('click', toggleSidebar);<br />
document.querySelectorAll('.sidebar-item a').forEach(link => {<br />
    link.addEventListener('click', toggleSidebar);<br />
});<br />
</script><br />
</body><br />
</html><br />
<br />
打赏反馈赞 0

#免责声明#

本文为转载 或 原创内容，未经授权禁止转载、摘编、复制及镜像使用、转载请注明作者、出处及原文链接、违者将依法追究责任。

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