Une navigation vertical avec des sections

5/5/2022 ☼ section ☼ navigation ☼ vertical

Niveau : ★★☆☆☆

1 - Le résultat dans la page

⟶ Voir l’exemple en pleine page

See the Pen sidebar with bullets navigation to snap sections by Nicolas Tilly (@nicolastilly) on CodePen.

2 - le code html

    <main>

            <!-- la naviation avec les cercles à gauche-->
            <aside>
        <ul>
          <li>
            <a class="indicator active" href="#first"></a>
          </li>
          <li>
            <a class="indicator" href="#second"></a>
          </li>
          <li>
            <a class="indicator" href="#third"></a>
          </li>
                     <li>
            <a class="indicator" href="#quatre"></a>
          </li>
                     <li>
            <a class="indicator" href="#cinq"></a>
          </li>
        </ul>
      </aside>
            <!-- la naviation avec les cercles à gauche-->

            <!-- les 5 sections qui contiennent les cercles-->
      <section id="first">
        <div class="cercle"></div>
      </section>
      <section id="second">
        <div class="cercle"></div>
      </section>
      <section id="third">
        <div class="cercle"></div>
      </section>
                  <section id="quatre">
        <div class="cercle"></div>
      </section>
                  <section id="cinq">
        <div class="cercle"></div>
      </section>
            <!-- les 5 sections qui contiennent les cercles-->

    </main>