如何实现响应式Navbar：空间充足显示导航项，不足时转为折叠按钮？

完全可以实现这种响应式导航栏，结合你已有的侧边栏下拉（offcanvas）功能，下面是完整的实现方案：

1. HTML 结构 #

<header class="navbar">
  <div class="navbar-container">
    <a href="#" class="navbar-logo">MySite</a>
    
    <!-- 大屏幕显示的导航项 -->
    <nav class="nav-items">
      <a href="#" class="nav-link">首页</a>
      <a href="#" class="nav-link">产品</a>
      <a href="#" class="nav-link">关于</a>
      <a href="#" class="nav-link">联系</a>
    </nav>
    
    <!-- 小屏幕显示的切换按钮 -->
    <button class="nav-toggle" aria-label="打开导航菜单">
      <span class="toggle-icon">☰</span>
    </button>
  </div>
  
  <!-- 侧边栏下拉菜单 -->
  <div class="offcanvas-menu">
    <button class="offcanvas-close" aria-label="关闭导航菜单">×</button>
    <nav class="offcanvas-nav">
      <a href="#" class="offcanvas-link">首页</a>
      <a href="#" class="offcanvas-link">产品</a>
      <a href="#" class="offcanvas-link">关于</a>
      <a href="#" class="offcanvas-link">联系</a>
    </nav>
  </div>
</header>

2. CSS 样式 #

/* 基础导航栏样式 */
.navbar {
  background-color: #2c3e50;
  padding: 1rem 0;
  position: relative;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-logo {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}

/* 大屏幕导航项样式 */
.nav-items {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #3498db;
}

/* 切换按钮初始隐藏（大屏幕） */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
}

/* 侧边栏下拉菜单样式 */
.offcanvas-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background-color: #2c3e50;
  padding: 2rem;
  transition: right 0.3s ease;
  z-index: 1000;
}

.offcanvas-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  margin-bottom: 2rem;
}

.offcanvas-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.offcanvas-link {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

.offcanvas-link:hover {
  color: #3498db;
}

/* 响应式断点：小屏幕显示切换按钮，隐藏导航项 */
@media (max-width: 768px) {
  .nav-items {
    display: none;
  }
  
  .nav-toggle {
    display: block;
  }
  
  /* 侧边栏激活状态 */
  .offcanvas-menu.active {
    right: 0;
  }
}

3. JavaScript 交互 #

const navToggle = document.querySelector('.nav-toggle');
const offcanvasMenu = document.querySelector('.offcanvas-menu');
const offcanvasClose = document.querySelector('.offcanvas-close');

// 打开侧边栏
navToggle.addEventListener('click', () => {
  offcanvasMenu.classList.add('active');
});

// 关闭侧边栏
offcanvasClose.addEventListener('click', () => {
  offcanvasMenu.classList.remove('active');
});

// 点击侧边栏外部关闭
document.addEventListener('click', (e) => {
  if (!offcanvasMenu.contains(e.target) && !navToggle.contains(e.target)) {
    offcanvasMenu.classList.remove('active');
  }
});

关键说明 #

• 媒体查询断点：这里用768px作为大屏/小屏的分界，你可以根据需求调整这个数值。
• 侧边栏过渡：通过right属性的过渡动画实现侧边栏滑入滑出的效果，和现有offcanvas逻辑完全兼容。
• 无障碍支持：给按钮添加了aria-label属性，提升屏幕阅读器的兼容性。

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