如何使用@media实现小屏幕下的可折叠导航栏

你现有代码缺少折叠触发控件和小屏适配规则，按以下步骤修改即可实现效果：

• 第一步：补全HTML结构，添加汉堡菜单触发按钮
• 第二步：编写CSS样式，通过媒体查询区分大屏、小屏展示逻辑，添加折叠展开过渡效果
• 第三步：添加少量原生JS，实现点击按钮切换导航展开/收起状态

1. 补全后的HTML代码 #

在原有logo标签后、nav标签前添加菜单触发按钮，完整结构如下：

<header class="header">
  <a href="#" class="logo">
    <img src="images/logo.png" alt="站点logo">
  </a>
  <!-- 新增折叠触发按钮 -->
  <button class="menu-toggle" aria-label="切换导航菜单">☰</button>
  <nav class="navbar">
    <div class="cart">
      <a href="index.html">Strona główna</a>
      <a href="shop.html">Sklep</a>
      <a href="cart.html">
        <ion-icon name="basket"></ion-icon>Koszyk<span>0 </span>
      </a>
    </div>
  </nav>
</header>

2. 对应CSS样式 #

默认样式适配大屏展示，768px宽度断点下切换为折叠模式，你可以根据设计需求调整断点数值、配色、间距：

/* 基础头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  position: relative;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.logo img {
  height: 42px;
}
/* 导航链接容器默认水平排列 */
.cart {
  display: flex;
  gap: 2.2rem;
  align-items: center;
}
.cart a {
  text-decoration: none;
  color: #2b2b2b;
  font-weight: 500;
}
/* 大屏默认隐藏汉堡按钮 */
.menu-toggle {
  display: none;
  font-size: 1.6rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.2rem;
}

/* 小屏适配规则 */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    /* 默认折叠状态 */
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  }
  /* 导航展开时添加的状态类 */
  .navbar.active {
    height: fit-content;
  }
  .cart {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 5%;
    gap: 1.2rem;
  }
}

3. 交互JS代码 #

不需要引入第三方库，将以下代码放在页面</body>标签前即可：

<script>
const menuToggle = document.querySelector('.menu-toggle');
const navbar = document.querySelector('.navbar');

// 点击按钮切换导航展开/收起
menuToggle.addEventListener('click', () => {
  navbar.classList.toggle('active');
  // 切换按钮图标，展开时显示关闭叉号
  menuToggle.textContent = navbar.classList.contains('active') ? '✕' : '☰';
});

// 可选优化：点击任意导航链接后自动收起菜单
document.querySelectorAll('.cart a').forEach(link => {
  link.addEventListener('click', () => {
    navbar.classList.remove('active');
    menuToggle.textContent = '☰';
  });
});
</script>

如果对动画流畅度要求更高，可以把高度过渡改为transform: translateY()偏移实现，能获得更好的渲染性能；断点数值、配色、间距都可以根据你的实际页面设计自由调整。

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