js 设计一个侧边菜单，可通过点击按钮显示/隐藏整个菜单，右边为主页面

封面图 • 2025-10-17 • JavaScript

下面是一个使用 **JavaScript** 实现的 **侧边菜单**，可以通过点击按钮显示或隐藏整个菜单，右侧为主页面。这个示例使用了 HTML、CSS 和 JavaScript。

---

### ✅ 功能说明：
- 点击按钮切换侧边菜单的显示/隐藏。
- 侧边菜单默认隐藏，点击后显示。
- 主页面内容在右侧。

---

### 📁 文件结构（可直接复制到一个 HTML 文件中运行）：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>侧边菜单示例</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

.container {
      display: flex;
      height: 100vh;
    }

.sidebar {
      width: 250px;
      background-color: #333;
      color: white;
      padding: 20px;
      transition: transform 0.3s ease;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      z-index: 1000;
    }

.sidebar.hidden {
      transform: translateX(-100%);
    }

.main-content {
      flex: 1;
      padding: 20px;
      background-color: #f4f4f4;
      overflow-y: auto;
    }

.toggle-btn {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 1001;
      padding: 10px 15px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }
  </style>
</head>
<body>

<div class="main-content">
    <h1>主页面内容</h1>
    <p>这是主页面的内容区域，侧边菜单可以在这里通过按钮显示或隐藏。</p>
  </div>
</div>

<button class="toggle-btn" onclick="toggleSidebar()">☰ 菜单</button>

</body>
</html>
```

---

### 🔧 使用说明：

- 将上面代码保存为 `index.html` 并在浏览器中打开。
- 点击左上角的 `☰ 菜单` 按钮，即可切换侧边菜单的显示与隐藏。
- 侧边菜单默认是隐藏的，点击后会滑入屏幕。

---

### 🛠 可扩展功能建议：

- 添加动画效果（如淡入淡出）。
- 在菜单中添加链接跳转功能。
- 响应式设计，适配移动端。
- 使用 `localStorage` 记录用户上次的菜单状态。

如果你需要更复杂的功能（比如响应式设计、动画、多级菜单等），也可以告诉我，我可以继续帮你完善！

js 设计一个侧边菜单，可通过点击按钮显示/隐藏 整个菜单，右边为主页面

js 设计一个侧边菜单，可通过点击按钮显示/隐藏整个菜单，右边为主页面