Estoy tratando de crear un pequeño menú animado que se colocaría en la parte superior de mi sitio web de una página. La página está organizada como un libro, por lo que tendría capítulos como introducción, etc. a medida que se desplaza de arriba a abajo. Mi pequeño menú tendría una línea y a lo largo de esta línea estarían los nombres de los capítulos. También habría un punto, y el punto se movería a lo largo de esta línea, y dependiendo de qué capítulo haya colocado su navegador, el punto se movería y se posicionaría mismo en consecuencia. Además, si hace clic en el capítulo específico de este menú, el navegador saltará automáticamente allí, al igual que el pequeño punto. El problema es que soy nuevo en CSS/HTML/Javascript y tengo dificultades para hacerlo. Hasta ahora logré crear un punto y los nombres de los capítulos, pero tengo problemas para ubicarlos. Por alguna razón, la línea que creé no se mostrará, pero sí el círculo. Entonces, para resumirlo:

1. crear una línea horizontal en el medio
2. punto de posición al principio de la línea (capítulo de introducción)
3. colocar los nombres de los capítulos debajo de la línea en algunos intervalos regulares
4. agregue la lógica que seguirá qué capítulo se muestra en el navegador y mueva el pequeño punto en consecuencia
5. agregue enlaces para saltar a una parte específica de la página cuando el usuario haga clic en el nombre de un capítulo específico en el menú (esta parte sé cómo hacerlo)

 .section{ background:black; width: %100; /* center a div insie another div*/ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; height: 200px; } .circle { width: 5px;; height: 5px; margin: 10px; background: white; border-radius: 50%; } ul { display: flex; } li { color: white; transform: rotate(65deg); transform: translate (-30px,-30px); list-style-type: none; } .line { height 10px; width: 100%; transform: translate (50%,0); } .list { transform: translate(50%,50px); }

 <div class="section"> <div class="list"> <ul> <li>Intro</li> <li>Part 1</li> <li>Part 2</li> </ul> </div> <div class="circle"></div> <div class="line"></div> </div>