如何用纯 HTML/CSS/JS 实现带居中 Logo 的响应式导航栏-html教程-PHP中文网

如何用纯 HTML/CSS/JS 实现带居中 Logo 的响应式导航栏

本文提供一套轻量、语义清晰的响应式导航栏实现方案，支持桌面端居中 logo + 两侧菜单、移动端折叠为汉堡按钮+下拉菜单，并兼顾透明头、悬停变色、滚动高亮等交互效果。

本文提供一套轻量、语义清晰的响应式导航栏实现方案，支持桌面端居中 logo + 两侧菜单、移动端折叠为汉堡按钮+下拉菜单，并兼顾透明头、悬停变色、滚动高亮等交互效果。

要实现一个真正健壮且可维护的响应式导航栏（尤其是带居中 Logo的布局），关键不在于堆砌嵌套容器或重复结构，而在于选择合适的 CSS 布局模型——CSS Grid 是桌面端居中 Logo 的最优解，配合 Flexbox 和媒体查询处理移动端切换，能极大简化逻辑。

✅ 推荐结构：语义化 + 单一导航流

避免使用多个 .menu、.left-side、.right-side 等冗余 wrapper。HTML 应保持扁平、语义清晰：

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

<header class="header"><nav class="nav" id="mainNav"><a href="#" class="nav-item">Products</a>
    <a href="#" class="nav-item">Order Now</a>
    <div class="nav-logo">
      @@##@@
    </div>
    <a href="#" class="nav-item">Service Locator</a>
    <a href="#" class="nav-item">Contact</a>
  </nav><button class="btn-toggle" aria-label="Toggle menu">
    <svg viewbox="0 0 24 24" width="24" height="24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button>
</header>

✅ CSS 核心：Grid 实现居中，Media Query 控制响应

/* 基础头样式 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background-color 0.3s ease;
}

.header:hover {
  background-color: #7B97A6;
}

/* 滚动后添加背景（通过 JS 添加 .scrolled 类） */
.header.scrolled {
  background: linear-gradient(180deg, #7B97A6 0%, #2C4149 50%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}

/* 桌面端：5 列等宽 Grid，Logo 自动居中 */
.nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  height: 78px;
  padding: 0 2rem;
  gap: 1rem;
}

.nav-item,
.nav-logo {
  text-align: center;
}

.nav-logo img {
  height: 40px;
  width: auto;
}

.nav-item {
  color: white;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.1rem;
  font-size: 1.1rem;
}

.nav-item:hover {
  color: #cf0a2c;
  transition: color 0.3s;
}

/* 移动端断点：隐藏导航，显示按钮 */
@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #2C4149;
    flex-direction: column;
    padding: 2rem 0;
    gap: 1.5rem;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 99;
  }

  .nav.active {
    transform: translateY(0);
  }

  .btn-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    margin: 0.8rem 1.5rem;
    padding: 0.5rem;
  }

  .btn-toggle svg {
    fill: white;
  }

  /* 隐藏桌面端导航项，仅保留按钮 */
  .nav-item,
  .nav-logo {
    display: none;
  }

  /* 移动端单独展示 Logo（可选） */
  .nav.active::before {
    content: "MENU";
    display: block;
    color: #7B97A6;
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
  }
}

✅ JavaScript：轻量交互控制

// DOM 元素缓存（提升性能）
const nav = document.getElementById('mainNav');
const toggleBtn = document.querySelector('.btn-toggle');
const header = document.querySelector('.header');

// 滚动监听：添加/移除 .scrolled 类
window.addEventListener('scroll', () => {
  header.classList.toggle('scrolled', window.scrollY > 10);
});

// 点击切换菜单展开状态
toggleBtn.addEventListener('click', () => {
  nav.classList.toggle('active');
  // 可选：点击后关闭菜单（移动端常见行为）
  if (nav.classList.contains('active')) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = '';
  }
});

// 点击菜单项后自动收起（提升移动端体验）
document.querySelectorAll('.nav-item').forEach(link => {
  link.addEventListener('click', () => {
    nav.classList.remove('active');
    document.body.style.overflow = '';
  });
});

⚠️ 注意事项与最佳实践

避免 float 和过度 position: absolute：原代码中 .nav-logo { float: none; margin: 0 auto; } 在 flex 容器中无效；Grid/Flex 下 margin: auto 仅在特定轴生效，不如显式 grid-column 或 justify-content 可控。
图标建议内联 SVG：比外部 .svg 文件更易配色、缩放，也避免路径错误。
无障碍增强：为 .btn-toggle 添加 aria-expanded 属性，并在 JS 中同步更新；为 .nav 添加 role="navigation"。
性能提示：滚动监听中使用 throttle 或 passive: true（如 addEventListener('scroll', handler, { passive: true })）可进一步优化。