鼠标悬停垂直导航栏时如何调整页面内容位置避免被遮挡

解决方案 #

有两种常用实现方式，优先推荐无JS的Flex布局方案，适配性更强：

方案1：Flex自动适配（推荐） #

直接给body开启Flex横向布局，利用Flex自动分配剩余宽度的特性，不需要手动计算收缩值，导航栏伸缩时内容区会自动同步调整宽度：

/* 基础布局重置 */
body {
  margin: 0;
  padding: 0;
  display: flex; /* 横向排列导航和内容 */
  min-height: 100vh; /* 撑满视口高度 */
}
/* 导航栏样式 */
navbar {
  flex-shrink: 0; /* 禁止导航被压缩 */
  width: 5rem; /* 默认收起宽度 */
  transition: width 0.3s ease; /* 过渡动画和你原有动画保持一致即可 */
  /* 删掉你之前加的position: fixed相关代码 */
}
/* 导航栏悬停/聚焦展开 */
navbar:hover,
navbar:focus {
  width: 16rem;
}
/* 内容区样式 */
#content {
  flex-grow: 1; /* 占满导航外的所有剩余宽度 */
  overflow-x: auto; /* 内容过宽时自动出现横向滚动条，避免布局错乱 */
  transition: all 0.3s ease; /* 同步过渡动画 */
}

方案2：兼容Fixed定位的调整方案 #

如果你的导航栏必须保留position: fixed定位（比如需要滚动时固定在左侧），可以用兄弟选择器同步修改内容区的左边距：

body {
  margin: 0;
  padding: 0;
}
navbar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 5rem;
  transition: width 0.3s ease;
  z-index: 100;
}
navbar:hover,
navbar:focus {
  width: 16rem;
}
#content {
  /* 默认边距匹配导航收起宽度 */
  margin-left: 5rem;
  transition: margin-left 0.3s ease;
}
/* 导航展开时同步修改内容区左边距 */
navbar:hover + #content,
navbar:focus + #content {
  margin-left: 16rem;
}

扩展说明 #

如果你的导航栏展开触发逻辑是点击切换（不是悬停），可以加简单JS控制类名即可：

const nav = document.querySelector('navbar')
// 点击切换展开状态
nav.addEventListener('click', () => {
  nav.classList.toggle('nav-active')
})

对应CSS里把:hover/:focus的选择器换成.nav-active即可。

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