Spis treści w CSS

Wstęp

Każdy z moich wpisów na tej stronie opatrzony jest spisem treści. Celem tego elementu jest ułatwienie użytkownikowi dotarcie do interesującej go treści. Zatem jakie elementy powinien zawierać spis treści?

1. Tytuły rozdziałów, podrozdziałów lub sekcji.
2. Elementy (kropki lub kreski) łączące tytuł z numerem strony.
3. Numer strony, na której znajduje się dana treść.

Łatwo zauważyć, że w przypadku mojej strony, trzeciego punktu nie ma, ale to chyba całkiem logiczne.

Szablon w HTML

Zacznijmy od napisania wstępnego kodu HTML odpowiedzialnego za nasz spis treści.

Powyższy kod jeszcze nie wygląda zbyt atrakcyjnie, jednak dobrze symuluje semantykę spisu treści na stronie lub w książce.

Style CSS tytułu i numeru strony

Mając już gotowy kod HTML, należy zastanowić się, jak będzie wyglądał nasz spis treści w CSS.

Musimy umieścić tytuł rozdziału z lewej strony, następnie numer strony z prawej. Pomiędzy nimi powinien znaleźć się obszar „wykropkowany”. Zatem jak to wykonać w CSS? Przypomnijmy sobie selektory CSS, które sprawdzą się tutaj bardzo dobrze.

.toc {
  display: flex;
  flex-flow: column wrap;
  color: #041c36;
  font-size: 1rem;
  margin: 2rem auto;
  max-width: 800px;
  
  li {
    a {
      width: 100%;
      text-decoration: none;
      color: #041c36;
      display: flex;
      flex-flow: row nowrap;
      width: 100%;
      margin: 0.2rem 0;
      font-size: 1rem;
    }
    ol {
      padding-inline-start: 1rem;
      margin: auto;
    }
  }
  
  &__title {
    display: flex;
    width: 100%;
    
    &::after {
      border-bottom: 1px dotted #b0b0b0;
      content: " ";
      flex: 1;
      margin: 0 5px;
    }
  }
  
  &__page {
    font-size: 1rem;
    text-align: right;
  }
}

Efektem powyższego kodu jest nasz spis treści. Analizując go od początku, blok będzie wykonany we flexbox, w układzie kolumny. Wewnątrz wiersza mamy do czynienia także z „flexem”, tym razem już elementy będą ułożone tak, aby tytuł i numer znalazły się obok siebie.

Tutaj zaczyna się cała zabawa naszym pseudo-selektorem ::after. Posłuży nam on do wykonania kropek pomiędzy tytułem a numerem.

::after {
  border-bottom: 1px dotted #b0b0b0;
  content: " ";
  flex: 1;
  margin: 0 5px;
}

Efekt końcowy spisu treści w CSS

Do czego jeszcze?

Pomysłów, do czego jeszcze można to wykorzystać jest wiele, choćby cennik usług czy produktów.

Przykładem tutaj są grupy produktów wraz z cenami: