带有可折叠单个项目的侧边栏

Question

我有一个标准 HTML 列表，其中包含一些菜单项，这些菜单项将充当指向长滚动页面各个部分的锚链接。我想将其格式化为最小的垂直侧导航栏，其中每个项目最初只显示一个小的彩色圆圈（但没有文本 - 有点像交通信号灯，但颜色相同），然后当用户将鼠标悬停在每个项目上时圆圈，只有该项目的全文弹出到一边。我无法直接访问 HTML，因为它是由第三方工具生成的，但如果需要，可以使用 Javascript 访问 DOM。

我开始使用的代码类似于：

<ul id="navigation">
  <li><a href="#link1">Link1</a></li>
  <li><a href="#link2">Link2</a></li>
  <li><a href="#link3">Link3</a></li>
</ul>

我可以找到大量弹出整个侧面板的示例 - 但不仅仅是单个项目。我的主要问题是我无法弄清楚如何描述它以搜索更多信息，因此欢迎任何指示或建议。谢谢

Answer 1

可能像下面这样：

a {
 opacity: 0;
 transform: translateX(-100%);
 transition: all .3s ease;
 display: inline-block;
}

li:hover a {
  transform: translateX(0);
  opacity: 1;
}

<ul id="navigation">
  <li><a href="#link1">Link1</a></li>
  <li><a href="#link2">Link2</a></li>
  <li><a href="#link3">Link3</a></li>
</ul>

带有可折叠单个项目的侧边栏

Sidebar with collapsible individual items

html

css

navigation