如何用Sass实现汉堡菜单？已尝试教程但均无效

我来帮你搞定这个汉堡菜单的问题！你之前的代码其实只搭了个基础HTML架子，缺了CSS样式控制菜单的显示/隐藏和JavaScript处理点击交互，这就是为啥功能没生效的原因。下面给你一套完整的可行方案，直接套用就能用：

第一步：修正HTML结构 #

把菜单内容和汉堡触发按钮分开，汉堡按钮只做触发用，菜单内容还是放在<ul>里，逻辑更清晰：

<nav class="navbar">
  <div class="logo-box">
    <img src="../logos/foschini.png" class="logo">
  </div>
  <!-- 桌面端+移动端菜单内容 -->
  <ul class="nav-links">
    <li><a href="#">Hire an Engineer</a></li>
    <li><a href="#">Hiring</a></li>
    <li><a href="#">Plans</a></li>
    <li><a href="#">About us</a></li>
  </ul>
  <!-- 汉堡触发按钮 -->
  <span class="hamburger">
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
  </span>
</nav>

第二步：添加CSS样式 #

用CSS实现响应式布局，控制桌面/移动端的菜单显示状态，还加了汉堡按钮的动画效果：

/* 基础样式重置，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
  height: 40px;
}

/* 桌面端菜单样式 */
.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

/* 汉堡按钮默认在桌面端隐藏 */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 3px 0;
  transition: all 0.3s ease;
}

/* 移动端适配（屏幕宽度小于768px时生效） */
@media (max-width: 768px) {
  /* 把菜单藏在屏幕右侧外 */
  .nav-links {
    position: fixed;
    top: 60px; /* 和navbar高度对应，避免被遮挡 */
    right: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    transition: right 0.3s ease;
    box-shadow: -2px 0 4px rgba(0,0,0,0.1);
  }

  /* 显示汉堡按钮 */
  .hamburger {
    display: flex;
  }

  /* 菜单显示的状态类 */
  .nav-links.active {
    right: 0;
  }

  /* 汉堡按钮点击后变成叉号的动画 */
  .hamburger.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }
}

第三步：添加JavaScript交互逻辑 #

监听汉堡按钮的点击事件，切换菜单的显示/隐藏状态：

// 获取DOM元素
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

// 监听点击事件
hamburger.addEventListener('click', () => {
  // 切换active类，控制菜单和汉堡按钮的状态
  navLinks.classList.toggle('active');
  hamburger.classList.toggle('active');
});

额外优化建议 #

• 如果希望点击菜单选项后自动关闭汉堡菜单，可以给每个<a>标签添加点击事件，移除active类：

  // 获取所有菜单链接
  const linkItems = document.querySelectorAll('.nav-links a');
  linkItems.forEach(link => {
    link.addEventListener('click', () => {
      navLinks.classList.remove('active');
      hamburger.classList.remove('active');
    });
  });
  

• 可以根据自己的品牌风格调整CSS里的颜色、间距、动画时长等参数。
• 确保你的logo路径../logos/foschini.png是正确的，不然logo会显示不出来。

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