横向可折叠菜单点击展开右移，无堆叠异常动画实现咨询

你遇到的堆叠问题确实是width: 0属性导致：展开过程中容器宽度逐步变大，在宽度小于所有导航链接总宽度时，inline布局的链接会自动换行，直到容器宽度足够才会变成单行，就出现了你看到的拆堆动画。

用CSS transform的translateX属性做过渡动画，不会触发页面重排，性能更高，也从根源避免了宽度不足导致的换行问题：

• 给外层导航容器设置overflow: hidden，隐藏位移到外侧的导航内容
• 导航链接容器不用动态修改宽度，默认保留足够放下所有链接的宽度，关闭状态直接向左平移100%隐藏，打开状态平移回原位
• 给链接列表加white-space: nowrap强制所有链接始终保持单行，不会换行

修改后的代码 #

CSS部分 #

/* 外层容器改flex布局，避免float的异常问题 */
#navbar {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.bento-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height: 22px;
  width: 22px;
  cursor: pointer;
  flex-shrink: 0;
}

.bento-dot {
  width: 6px;
  height: 6px;
  background: #ff0000;
  overflow: hidden;
}

#navLinks {
  line-height: 22px;
  background-color: brown;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navMenuOpen {
  transform: translateX(0);
  opacity: 1;
}
.navMenuClosed {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none; /* 关闭状态禁止点击链接 */
}

/* 强制链接始终单行 */
#navLinksUl {
  margin: 0;
  list-style: none;
  padding-left: 10px;
  white-space: nowrap;
}

#navLinks li {
  display: inline;
  margin-right: 30px;
}

JS部分（可选优化，用classList.toggle简化逻辑） #

function navMenu() {
  document.getElementById("navLinks").classList.toggle("navMenuClosed");
}

如果你的业务场景必须用宽度动画，可以给链接容器和列表都加上white-space: nowrap强制不换行，同时要给打开和关闭状态都加上overflow: hidden避免内容溢出，不过这个方案会持续触发页面重排，性能不如transform方案。

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