如何在浏览器窗口宽度缩小时将溢出的导航链接行折叠为下拉菜单按钮

这个需求其实是响应式导航里的经典场景——动态溢出折叠，比固定断点的汉堡菜单更灵活，我给你一步步拆解实现方式，保证能解决你的问题：

1. 搭建基础HTML结构 #

首先要给导航栏准备好核心元素：正常显示的链接列表、默认隐藏的下拉按钮，以及用来存放溢出链接的下拉菜单容器：

<nav class="navbar">
  <div class="nav-links-container">
    <ul class="nav-links">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
      <li><a href="#">博客</a></li>
      <li><a href="#">常见问题</a></li>
    </ul>
  </div>
  <button class="dropdown-toggle" id="dropdownToggle">更多 ▾</button>
  <ul class="dropdown-menu" id="dropdownMenu"></ul>
</nav>

2. 设置基础CSS样式 #

先给导航栏做布局适配，确保链接横向排列、溢出时不换行，同时默认隐藏下拉按钮和菜单：

.navbar {
  position: relative; /* 让下拉菜单相对于导航栏定位 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #333;
  padding: 0 1rem;
  overflow: hidden;
}

.nav-links-container {
  flex-grow: 1; /* 让链接容器占满剩余宽度 */
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap; /* 强制链接不换行，保证溢出的是整个项 */
}

.nav-links li {
  margin-right: 1rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  padding: 1rem 0;
}

.dropdown-toggle {
  display: none;
  background: #444;
  color: white;
  border: none;
  padding: 1rem;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 1rem;
  background: #333;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 150px;
}

.dropdown-menu li {
  padding: 0.5rem 1rem;
}

.dropdown-menu a {
  color: white;
  text-decoration: none;
  display: block;
}

/* 点击按钮时显示下拉菜单 */
.dropdown-menu.active {
  display: block;
}

3. 核心JavaScript逻辑（动态判断溢出） #

这部分是实现功能的关键——监听窗口大小变化，实时计算链接总宽度和容器宽度，自动把溢出的链接移到下拉菜单，窗口变宽时再移回去：

const navLinksContainer = document.querySelector('.nav-links-container');
const navLinksList = document.querySelector('.nav-links');
const dropdownToggle = document.getElementById('dropdownToggle');
const dropdownMenu = document.getElementById('dropdownMenu');

// 处理导航溢出的核心函数
function handleNavOverflow() {
  // 先重置状态：把下拉菜单里的链接全部移回原导航列表
  while (dropdownMenu.firstChild) {
    navLinksList.appendChild(dropdownMenu.firstChild);
  }

  const containerWidth = navLinksContainer.offsetWidth;
  const navItems = Array.from(navLinksList.children);
  let totalWidth = 0;
  const itemsToMove = [];

  // 遍历所有导航项，计算总宽度，找出溢出的项
  navItems.forEach(item => {
    totalWidth += item.offsetWidth;
    // 当总宽度超过容器宽度时，标记该项目需要移到下拉菜单
    if (totalWidth > containerWidth) {
      itemsToMove.push(item);
    }
  });

  // 处理溢出项
  if (itemsToMove.length > 0) {
    dropdownToggle.style.display = 'block';
    // 将溢出项移到下拉菜单
    itemsToMove.forEach(item => {
      navLinksList.removeChild(item);
      dropdownMenu.appendChild(item);
    });
  } else {
    // 没有溢出时隐藏下拉按钮和菜单
    dropdownToggle.style.display = 'none';
    dropdownMenu.classList.remove('active');
  }
}

// 监听窗口resize事件，加防抖避免频繁触发
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(handleNavOverflow, 200); // 200ms防抖，提升性能
});

// 点击下拉按钮切换菜单显示
dropdownToggle.addEventListener('click', () => {
  dropdownMenu.classList.toggle('active');
});

// 页面加载时先执行一次，确保初始状态正确
document.addEventListener('DOMContentLoaded', handleNavOverflow);

4. 关键注意事项 #

• 防抖处理：窗口resize事件会频繁触发，用setTimeout做防抖可以避免频繁计算，提升页面性能。
• 相对定位：给.navbar加position: relative，保证下拉菜单相对于导航栏定位，不会乱跑。
• 灵活适配：这个方案是动态判断内容溢出，不管屏幕宽度多少，只要链接放不下就自动折叠，比固定断点的汉堡菜单更适配复杂内容场景。

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