如何实现侧边菜单在990px断点下的响应式布局？

1. 调整HTML结构 #

先在页面header区域新增专属的汉堡按钮，同时给左侧图标栏和完整菜单加上独立类名，方便统一控制显示状态：

<!-- Header区域的移动端汉堡按钮 -->
<header class="page-header">
  <button class="mobile-hamburger" id="mobileHamburger">☰</button>
</header>

<!-- 侧边图标栏 -->
<div class="sidebar-icon-bar" id="sidebarIconBar">
  <!-- 图标内容 -->
</div>

<!-- Off Canvas完整菜单 -->
<div class="offcanvas-menu" id="offcanvasMenu">
  <!-- 菜单内容 -->
</div>

2. 编写响应式CSS逻辑 #

通过媒体查询针对屏幕宽度≤990px的场景设置样式，区分大屏和小屏的显示规则：

/* 大屏默认样式（宽度>990px） */
.sidebar-icon-bar {
  position: fixed;
  left: 0;
  /* 你的大屏图标栏样式 */
}
.mobile-hamburger {
  display: none; /* 大屏下隐藏header里的汉堡按钮 */
}

/* 小屏适配样式（宽度≤990px） */
@media (max-width: 990px) {
  .mobile-hamburger {
    display: block; /* 显示header内的汉堡按钮 */
    padding: 1rem;
    font-size: 1.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  /* 默认隐藏图标栏和完整菜单 */
  .sidebar-icon-bar,
  .offcanvas-menu {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    transition: left 0.3s ease;
    /* 你的小屏菜单样式，比如背景、宽度等 */
  }

  /* 激活状态下同时显示图标栏和菜单 */
  .sidebar-icon-bar.active,
  .offcanvas-menu.active {
    left: 0;
  }

  /* 可选：添加遮罩层，点击外部关闭菜单 */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }
  .menu-overlay.active {
    display: block;
  }
}

3. 调整JavaScript交互逻辑 #

修改点击事件，让小屏下点击汉堡按钮时同时切换图标栏和菜单的显示状态：

const hamburgerBtn = document.getElementById('mobileHamburger');
const iconBar = document.getElementById('sidebarIconBar');
const offcanvasMenu = document.getElementById('offcanvasMenu');

// 创建遮罩层并添加到页面
const overlay = document.createElement('div');
overlay.className = 'menu-overlay';
document.body.appendChild(overlay);

// 统一切换菜单状态的函数
function toggleMenuState() {
  iconBar.classList.toggle('active');
  offcanvasMenu.classList.toggle('active');
  overlay.classList.toggle('active');
}

// 汉堡按钮点击事件
hamburgerBtn.addEventListener('click', toggleMenuState);

// 点击遮罩层关闭菜单
overlay.addEventListener('click', toggleMenuState);

// 可选：菜单内部关闭按钮的点击事件
const closeBtn = document.getElementById('menuCloseBtn');
if (closeBtn) {
  closeBtn.addEventListener('click', toggleMenuState);
}

核心逻辑说明 #

• 大屏场景：保持原有交互，图标栏固定左侧，原汉堡按钮（若存在）仅控制完整菜单展开。
• 小屏场景：仅header显示汉堡按钮，点击后通过active类触发图标栏和菜单的滑入动画，遮罩层用于实现点击外部关闭菜单的交互，提升体验。
• 过渡动画优先用transform: translateX(-100%)替代left属性，性能更优，可根据需求替换。

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