纯HTML/SASS导航栏添加折叠功能求助（无Bootstrap）

核心实现思路 #

用CSS媒体查询控制移动端菜单的显示/隐藏，配合原生JS实现点击触发折叠交互，完全兼容你现有的HTML/SASS技术栈，无需依赖第三方框架。

代码修改方案 #

1. HTML结构调整 #

给导航菜单添加容器，新增移动端专属的汉堡触发按钮：

<nav class="navbar">
  <!-- 汉堡按钮（仅移动端可见） -->
  <button class="navbar-toggle" id="navbarToggle">
    <span></span>
    <span></span>
    <span></span>
  </button>
  
  <!-- 导航菜单容器 -->
  <div class="navbar-menu" id="navbarMenu">
    <!-- 替换成你现有的导航链接/PHP动态生成的内容 -->
    <a href="#" class="nav-link">首页</a>
    <a href="#" class="nav-link">产品</a>
    <a href="#" class="nav-link">关于我们</a>
    <a href="#" class="nav-link">联系客服</a>
  </div>
</nav>

2. SCSS样式补充 #

添加响应式规则和折叠状态样式：

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  
  // 汉堡按钮样式
  .navbar-toggle {
    display: none;
    flex-direction: column;
    background: transparent;
    border: none;
    cursor: pointer;
    
    span {
      width: 25px;
      height: 3px;
      background-color: #333;
      margin: 3px 0;
      transition: all 0.3s ease;
    }
  }
  
  // 桌面端菜单默认展示
  .navbar-menu {
    display: flex;
    gap: 2rem;
    
    .nav-link {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      
      &:hover {
        color: #007bff;
      }
    }
  }
  
  // 移动端适配（断点可根据需求调整）
  @media (max-width: 767px) {
    .navbar-toggle {
      display: flex;
    }
    
    // 移动端默认隐藏菜单
    .navbar-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #fff;
      flex-direction: column;
      padding: 1rem 2rem;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    
    // 菜单展开状态
    .navbar-menu.active {
      max-height: 300px; // 根据菜单链接数量调整高度
    }
  }
}

3. 原生JS交互逻辑 #

在HTML页面末尾添加脚本，实现点击汉堡按钮切换菜单状态：

const navbarToggle = document.getElementById('navbarToggle');
const navbarMenu = document.getElementById('navbarMenu');

navbarToggle.addEventListener('click', () => {
  navbarMenu.classList.toggle('active');
});

关键注意事项 #

• 媒体查询的断点（767px）可根据你的设计需求自行调整
• max-height 的值需要确保能容纳所有导航链接，避免出现滚动条
• 如果你的导航链接是PHP动态生成的，直接将生成代码放入 .navbar-menu 容器即可

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