如何实现点击汉堡菜单显示导航栏Home、About链接

你现有代码已经完成了大屏布局和小屏默认隐藏链接的基础效果，只需要补全以下代码即可实现点击展开/收起的功能，同时兼顾小屏纵向堆叠的样式。

1. 修正HTML语义问题（推荐） #

ul标签的直接子元素仅允许为li，你原有代码直接在ul下放置div和button会触发部分浏览器的异常渲染，调整导航部分结构如下：

<nav class="topNav">
  <ul>
    <li class="logo-item">
      <img src="./images/favicon.ico" alt="site logo">
    </li>
    <li class="hamburger-item">
      <button class="hamburger" id="hamburger" onclick="showText()">
        <i class="fas fa-bars"></i>
      </button>
    </li>
    <li class="nav-link"><a href="#home">Home</a></li>
    <li class="nav-link"><a href="#section-title">About</a></li>
  </ul>
</nav>

2. 调整CSS样式 #

替换原有导航相关的CSS代码，新增激活状态类控制链接显示，同时补全小屏纵向布局规则：

/* 导航栏基础样式 */
nav ul{
  background-color: grey;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: .5rem;
  border: white solid;
  justify-content: flex-end;
  align-items: center;
}

nav ul li {
  padding: 0 .5rem;
}

/* logo样式 */
.logo-item{
  margin-right: auto;
}

.logo-item img  {
  width: 2rem;
}

.hamburger{
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  visibility: hidden;
  color: var(--clr-primary-5);
}

nav li a{
  color: var(--clr-primary-5);
}

.hamburger:focus{
  outline: none;
}

/* 大屏适配 */
@media screen and (min-width: 993px) {
  .nav-link {
    display: block;
  }
}

/* 小屏适配 */
@media screen and (max-width: 992px) {
  .hamburger{
    visibility: visible;
  }
  .nav-link {
    width: 100%;
    text-align: right;
    padding: 0.3rem 0;
    display: none;
  }
  /* 展开状态类 */
  .nav-link.show-links {
    display: block;
  }
}

3. 编写JS交互逻辑 #

在你的app.js文件中写入以下代码，实现点击按钮切换链接显示状态的效果，附带图标切换优化体验：

function showText() {
  // 获取所有导航链接项
  const navLinks = document.querySelectorAll('.nav-link')
  // 遍历切换显示类
  navLinks.forEach(link => {
    link.classList.toggle('show-links')
  })
  // 切换汉堡/关闭图标
  const menuIcon = document.querySelector('.hamburger i')
  menuIcon.classList.toggle('fa-bars')
  menuIcon.classList.toggle('fa-times')
}

实现效果说明：

• 宽度大于992px时，导航保持横向排列，汉堡按钮自动隐藏
• 宽度小于992px时，默认仅显示logo和汉堡按钮，链接纵向堆叠隐藏
• 点击汉堡按钮即可展开/收起链接，按钮图标同步在三条杠和叉号之间切换
• 后续你需要调整堆叠间距、配色、动画效果，直接修改对应CSS类的属性即可。

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