I am looking to create a unique navigation system for my website. I have a standard HTML list with menu items that will serve as anchor links on a long-scrolling page. My idea is to design it as a minimal vertical side navigation bar, where each item initially displays as a small colored circle without text - similar to traffic lights but all the same color. When a user hovers over a circle, I want the full text of that item to pop out to the side. The challenge is that I don't have direct access to the HTML code since it's generated by a third-party tool. However, I can utilize JavaScript to access the DOM if necessary.
The starting code snippet I have is:
<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>
I've been searching for examples where individual items in a side panel pop out rather than the entire panel, but haven't found much luck. If anyone has any tips or suggestions on how to achieve this effect, I would greatly appreciate it. Thank you!