如何实现桌面端透明Navbar，移动端Toggle切换显示（用媒体查询）

Hey，这个需求在响应式设计里太常见了！我给你一套完整的实现方案，纯HTML/CSS/JavaScript搞定，完全用媒体查询来适配桌面和移动端，不需要任何框架。

第一步：HTML结构 #

先搭好导航栏的基础结构，包含logo、导航链接和移动端的toggle按钮（默认在桌面端隐藏）：

<nav class="navbar">
  <div class="navbar-container">
    <a href="#" class="navbar-logo">我的网站</a>
    <!-- 移动端Toggle按钮 -->
    <button class="navbar-toggle" id="navbarToggle">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </button>
    <!-- 导航链接列表 -->
    <ul class="navbar-links" id="navbarLinks">
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </div>
</nav>

<!-- 示例内容，避免被固定导航栏遮挡 -->
<main style="padding-top: 6rem; padding: 2rem;">
  <h1>欢迎来到我的网站</h1>
  <p>这里是页面内容区域...</p>
</main>

第二步：CSS样式（核心是媒体查询） #

通过媒体查询区分桌面和移动端样式，实现桌面透明、移动端toggle控制显示隐藏：

/* 基础样式重置，消除默认边距和样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

/* 导航栏基础样式：固定在顶部 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 2rem;
  transition: background-color 0.3s ease; /* 可选的平滑过渡动画 */
}

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

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

.navbar-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.navbar-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.navbar-links a:hover {
  color: #dddddd;
}

/* 移动端Toggle按钮默认隐藏（桌面端不显示） */
.navbar-toggle {
  display: none;
  flex-direction: column;
  background: transparent;
  border: none;
  cursor: pointer;
}

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

/* --- 桌面端样式（屏幕宽度≥768px） --- */
@media (min-width: 768px) {
  .navbar {
    background-color: transparent; /* 核心：桌面端导航栏透明 */
  }
}

/* --- 移动端样式（屏幕宽度<768px） --- */
@media (max-width: 767px) {
  .navbar {
    background-color: #2c3e50; /* 移动端导航栏背景色，可自定义 */
  }

  /* 显示Toggle按钮 */
  .navbar-toggle {
    display: flex;
  }

  /* 默认隐藏导航链接，放在导航栏下方 */
  .navbar-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    flex-direction: column;
    padding: 1rem 2rem;
    gap: 1rem;
    display: none;
  }

  /* 激活状态：显示导航链接 */
  .navbar-links.active {
    display: flex;
  }
}

第三步：JavaScript交互 #

给toggle按钮添加点击事件，切换导航链接的显示/隐藏状态：

// 获取DOM元素
const navbarToggle = document.getElementById('navbarToggle');
const navbarLinks = document.getElementById('navbarLinks');

// 点击Toggle按钮时切换active类
navbarToggle.addEventListener('click', () => {
  navbarLinks.classList.toggle('active');
});

关键说明 #

• 媒体查询分界值：我用了768px作为桌面/移动端的分界，你可以根据需求改成992px或者其他数值。
• 透明效果注意事项：如果页面顶部有背景图或彩色背景，透明导航栏的文字颜色要和背景对比明显，避免看不清。
• 平滑过渡：CSS里的transition属性是可选的，能让背景色变化和菜单切换更流畅，不需要的话可以删掉。
• 内容遮挡：记得给页面主体（比如<main>）添加padding-top，避免内容被固定在顶部的导航栏挡住。

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