如何实现响应式菜单：窗口缩小时转为滑出按钮式菜单

1. 调整基础布局结构 #

先替换原有的position:absolute布局，改用流式结构保证大屏下左右分栏正常，同时新增滑出按钮和背景遮罩元素：

<!-- 外层用flex布局实现流式分栏 -->
<div class="container-fluid d-flex">
  <!-- 主内容区，占70%宽度 -->
  <main class="main-content" style="width: 70%; min-height: 100vh;">
    <!-- 你的主内容代码 -->
  </main>
  <!-- 侧边菜单，默认大屏显示 -->
  <aside class="sidebar" style="width: 30%; min-height: 100vh;">
    <!-- 你的菜单内容代码 -->
  </aside>
  <!-- 滑出触发按钮，小屏幕显示 -->
  <button class="sidebar-toggle d-md-none" type="button">☰</button>
  <!-- 背景遮罩，默认隐藏 -->
  <div class="overlay"></div>
</div>

2. 编写CSS样式 #

通过媒体查询设定临界宽度，实现不同屏幕下的布局切换，同时添加菜单滑出、背景灰化的动画效果：

/* 基础样式 */
.main-content {
  background: #fff;
  padding: 1rem;
}

.sidebar {
  background: #f8f9fa;
  padding: 1rem;
  transition: transform 0.3s ease;
}

/* 大屏下隐藏按钮和遮罩 */
.sidebar-toggle, .overlay {
  display: none;
}

/* 设定临界宽度（可根据需求调整），小于该宽度时切换为滑出菜单 */
@media (max-width: 1200px) {
  /* 侧边菜单转为固定定位，默认移出视口 */
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    transform: translateX(100%);
    z-index: 1050;
  }
  
  /* 显示滑出按钮 */
  .sidebar-toggle {
    display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1040;
    border: none;
    background: #007bff;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* 背景遮罩样式 */
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1045;
  }
  
  /* 菜单展开状态 */
  .sidebar.open {
    transform: translateX(0);
  }
  
  /* 遮罩激活状态 */
  .overlay.active {
    display: block;
  }
}

3. JavaScript交互逻辑 #

实现按钮触发菜单、点击遮罩/ESC键关闭菜单的交互：

const toggleBtn = document.querySelector('.sidebar-toggle');
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.overlay');

// 点击按钮切换菜单和遮罩状态
toggleBtn.addEventListener('click', () => {
  sidebar.classList.toggle('open');
  overlay.classList.toggle('active');
});

// 点击遮罩关闭菜单
overlay.addEventListener('click', () => {
  sidebar.classList.remove('open');
  overlay.classList.remove('active');
});

// 按ESC键关闭菜单
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && sidebar.classList.contains('open')) {
    sidebar.classList.remove('open');
    overlay.classList.remove('active');
  }
});

核心要点 #

• 移除原有的position:absolute，大屏下用流式布局保证左右分栏不重叠
• 用媒体查询控制临界宽度，自动切换布局模式
• 用transform实现菜单滑出动画，比修改right属性性能更优
• 背景遮罩既实现灰化效果，又能阻止用户点击主内容区域

内容的提问来源于stack exchange，提问作者cranked_coder