如何实现响应式导航栏？自定义导航栏小屏汉堡菜单适配求助

嘿，我来帮你把这个自定义导航栏改成小屏友好的汉堡菜单！结合你现有的代码，只需要调整HTML结构、补充CSS媒体查询和加一点点JS就能实现，具体步骤如下：

1. 调整HTML结构 #

首先给你的导航栏加上汉堡按钮，并且把导航链接放到一个单独的容器里，方便控制显示/隐藏：

<nav class="navbar_maincontainer">
  <!-- 汉堡按钮，小屏才显示 -->
  <div class="navbar_hamburger" aria-label="打开导航菜单">☰</div>
  
  <!-- 导航链接容器 -->
  <div class="navbar_links">
    <a href="#" class="nav_link">首页</a>
    <a href="#" class="nav_link">关于我们</a>
    <a href="#" class="nav_link">服务</a>
    <a href="#" class="nav_link">联系我们</a>
  </div>
</nav>

2. 补充CSS样式（含媒体查询） #

基于你现有的CSS，添加汉堡按钮的样式、小屏适配的媒体查询，以及菜单展开的状态样式：

:root{ 
  --main_color: #004771; 
  --main_color_shade: #072060; 
  --footer_color: #383838;
} 

.navbar_maincontainer{
  width:100%; 
  height:50px; 
  background-color:var(--main_color); 
  display:flex; 
  align-items:center; 
  padding:0 20px; /* 把左右padding改成小值，适配小屏 */
  font-size:17px;
  justify-content: space-between; /* 让汉堡和链接分别在左右两侧 */
}

/* 导航链接默认样式 */
.navbar_links{
  display:flex;
  gap:20px; /* 链接之间的间距 */
}

.navbar_links a{
  color:white;
  text-decoration:none;
  padding:8px 0;
}

/* 汉堡按钮默认隐藏，小屏显示 */
.navbar_hamburger{
  display:none;
  color:white;
  font-size:24px;
  cursor:pointer;
}

/* 小屏适配（这里用768px作为断点，你可以根据需求调整） */
@media (max-width:768px){
  .navbar_links{
    /* 小屏默认隐藏，改成垂直排列 */
    position:absolute;
    top:50px;
    left:0;
    width:100%;
    background-color:var(--main_color_shade);
    flex-direction:column;
    padding:15px 20px;
    gap:12px;
    display:none; /* 默认隐藏 */
  }
  
  .navbar_hamburger{
    display:block; /* 小屏显示汉堡按钮 */
  }
  
  /* 菜单展开时的显示状态 */
  .navbar_links.active{
    display:flex;
  }
}

3. 添加JavaScript控制菜单展开/收起 #

用简单的JS监听汉堡按钮的点击事件，切换链接容器的active类，同时优化可访问性标签：

const hamburgerBtn = document.querySelector('.navbar_hamburger');
const navLinks = document.querySelector('.navbar_links');

hamburgerBtn.addEventListener('click', () => {
  const isActive = navLinks.classList.toggle('active');
  // 更新aria标签，优化可访问性
  hamburgerBtn.setAttribute('aria-label', isActive ? '关闭导航菜单' : '打开导航菜单');
});

关键说明 #

• 媒体查询断点：我用了768px作为小屏的分界，你可以根据需求改成其他值（比如600px）
• 菜单定位：小屏时把菜单设置为绝对定位，在导航栏下方展开，避免挤压页面原有内容
• 可访问性优化：给汉堡按钮加上了aria标签，点击时切换标签文本，让屏幕阅读器用户也能清晰理解按钮功能

这样你的导航栏在大屏时显示完整的链接，小屏时就会变成三条杠的汉堡按钮，点击就能展开/收起菜单啦！

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