支持单个项悬浮展开文本的极简垂直侧边导航栏实现方案咨询

我刚好做过类似的交互效果，给你一套完整的实现方案——完全不需要修改第三方生成的HTML，只用JavaScript+CSS就能搞定你的需求：

核心实现思路 #

• 先通过JavaScript动态注入样式，把所有导航链接的文本默认隐藏，只保留一个彩色圆点作为标识
• 利用CSS的:hover伪类，仅在鼠标悬浮到单个圆点上时，显示对应链接的文本，并且通过过渡动画让弹出效果更自然
• 全程不改动原HTML结构，只通过DOM操作和样式注入完成需求

具体代码实现 #

第一步：动态注入样式（JavaScript） #

这段代码会自动把样式添加到页面的<head>里，不需要你手动修改样式表：

// 创建样式元素并注入到head
const style = document.createElement('style');
style.textContent = `
/* 导航容器样式：固定在左侧，垂直排列 */
#navigation {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 每个导航项的间距 */
#navigation li {
  margin: 15px 0;
  position: relative;
  overflow: hidden;
  width: 20px; /* 默认只显示圆点的宽度 */
}

/* 链接样式：默认隐藏文本，显示圆点 */
#navigation li a {
  display: inline-block;
  text-decoration: none;
  color: #333;
  padding-left: 25px; /* 给圆点留出位置 */
  transition: all 0.3s ease;
}

/* 用伪元素创建彩色圆点 */
#navigation li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #2563eb; /* 这里可以修改圆点颜色 */
}

/* 悬浮时展开宽度，显示文本 */
#navigation li:hover {
  width: max-content; /* 自动适配文本宽度 */
}
`;
document.head.appendChild(style);

代码解释 #

1. 导航容器定位：用fixed把导航固定在左侧垂直居中的位置，不随页面滚动移动
2. 默认隐藏文本：给<li>设置固定宽度（刚好容纳圆点），超出部分隐藏，这样链接文本就会被藏起来
3. 彩色圆点实现：用::before伪元素生成圆形，作为每个导航项的默认标识
4. 悬浮弹出效果：当鼠标悬浮到<li>上时，把它的宽度改成max-content，让文本自然显示出来，配合transition实现平滑的展开动画

额外优化建议 #

• 如果想要文本从右侧弹出而不是撑开宽度，可以把<a>的文本默认设置为transform: translateX(-100%)，hover时改成translateX(0)，这样动画会更像“弹出”
• 可以给当前激活的锚点（比如滚动到对应区域时）的圆点设置不同颜色，增强用户感知，这部分可以通过监听页面滚动事件实现

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