如何检测CSS响应式菜单与Logo触碰时机以切换移动端菜单？

我来帮你搞定这个响应式菜单的需求！核心思路是利用CSS媒体查询检测视口宽度，结合JavaScript控制菜单的显示状态，当页面窄到菜单和Logo开始挤压时，自动切换成汉堡图标+垂直菜单的布局。

完整实现代码 #

HTML（保留原有结构即可）

<div class="header">
  <div class="logo">Lorem ipsum dolor sit amet</div>
  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
    </a>
  </div>
</div>

CSS（添加响应式样式）

.header {
  overflow: hidden;
  background-color: #333;
  position: relative;
  width: inherit;
  margin-top: 20px;
}

.logo {
  display: inline-block;
  color: #fff;
  font-size: 17px;
  padding: 14px 16px;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  float: right;
}

.topnav svg {
  color: #fff;
  width: 20px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

/* 响应式断点：根据Logo长度调整这个值，比如Logo更长可设为900px */
@media screen and (max-width: 768px) {
  /* 隐藏默认菜单，显示汉堡图标 */
  .topnav a:not(:last-child) {display: none;}
  .topnav .icon {
    float: right;
    display: block;
  }
  
  /* 响应式状态下的菜单布局 */
  .topnav.responsive {
    float: none;
    display: block;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left; /* 菜单左对齐，和Logo视觉统一 */
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 16px;
    top: 14px;
  }
}

JavaScript（控制菜单切换）

function myFunction() {
  var x = document.getElementById("myTopnav");
  // 切换responsive类实现菜单展开/收起
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

关键逻辑说明 #

1. 媒体查询触发时机：我设置的断点是max-width:768px，你可以自己调整——缩小浏览器窗口，看到菜单开始和Logo重叠时记下当前宽度，把这个值替换进去就行。
2. 菜单切换机制：默认状态下汉堡图标隐藏，进入响应式断点后，隐藏所有菜单链接、显示汉堡图标；点击图标时通过JS给.topnav添加/移除responsive类，实现菜单的展开（垂直排列在Logo下方）和收起。
3. 布局细节优化：响应式状态下取消菜单的float:right，改成块级元素让它自然占据整行，菜单链接也改成块级垂直排列，保持视觉一致性。

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