Как сделать содержание (оглавление) в статье сайта/блога | HTML5

• Как создать оглавление внутри статьи блога
• Как сделать нумерованное содержание в статье сайта
• Многоуровневый нумерованный список HTML
• Подсвечивание разделов, к которым был сделан переход
• Фиксированное сверху меню и отступ от края окна браузера
• Фиксированное меню, в т.ч. для сайтов с параллакс эффектом, с подсветкой текущего пункта
• Меню с плавной прокруткой страницы
• Разбираем код ссылки: ссылка к заданному месту текста
• Нумерация в CSS
• Перелинковка страниц сайта

Оглавление в рамках статьи — это список ссылок. Только ссылки ведут не на другие страницы, а к подзаголовкам внутри одной длинной статьи.

Как создать оглавление внутри статьи блога

В начале заголовкам нужно задать id

<h2 id="steer">Бычок</h2>

Идет бычок, качается,
Вздыхает на ходу:
- Ох, доска кончается,
Сейчас я упаду!

<h2 id="bunny">Зайка</h2>

Зайку бросила хозяйка -
Под дождем остался зайка.
Со скамейки слезть не мог,
Весь до ниточки промок.

<h2 id="bear">Мишка</h2>

Уронили мишку на пол,
Оторвали мишке лапу.
Все равно его не брошу -
Потому что он хороший.

Код блока с содержанием, где href у ссылок точно такой же как id заголовков, за исключением символа #:

<nav class="toc">
  <h2>Содержание:</h2>
  <ul>
    <li><a href="#steer">Бычок</a>
    <li><a href="#bunny">Зайка</a>
    <li><a href="#bear">Мишка</a>
  </ul>
</nav>

посмотреть пример

Как сделать нумерованное содержание в статье сайта

Всё тоже самое, только ul нужно заменить на ol

<nav class="toc">
  <h2>Содержание:</h2>
  <ol>
    <li><a href="#steer">Бычок</a>
    <li><a href="#bunny">Зайка</a>
    <li><a href="#bear">Мишка</a>
  </ol>
</nav>

посмотреть пример

Многоуровневый нумерованный список HTML

Здесь уже нужна помощь CSS

<style>
.toc > ol {
  counter-reset: li;
}
.toc > ol > li {
  counter-increment: li;
}
.toc ol ol {
  counter-reset: lili;
}
.toc ol ol li {
  position: relative;
  list-style: none;
}
.toc ol ol li:before {
  content: counter(li) "." counter(lili) ".";
  counter-increment: lili;
  position: absolute;
  left: -2em;
}
</style>

<nav class="toc">
  <h2>Содержание:</h2>
  <ol>
    <li><a href="#raz">Четверостишия</a>
      <ol>
        <li><a href="#steer">Бычок</a>
        <li><a href="#bunny">Зайка</a>
        <li><a href="#bear">Мишка</a>
      </ol>
    <li><a href="#dva">Стихи</a>
      <ol>
        <li><a href="#r">Буква «Р»</a>
        <li><a href="#bullfinch">Снегирь</a>
      </ol>
</nav>

Логика призывает к такому построению тегов <h> в статье

<h2 id="raz">Четверостишия</h2>

<h3 id="steer">Бычок</h3>

Идет бычок, качается,
Вздыхает на ходу:
- Ох, доска кончается,
Сейчас я упаду!

<h3 id="bunny">Зайка</h3>

Зайку бросила хозяйка -
Под дождем остался зайка.
Со скамейки слезть не мог,
Весь до ниточки промок.

<h3 id="bear">Мишка</h3>

Уронили мишку на пол,
Оторвали мишке лапу.
Все равно его не брошу -
Потому что он хороший.

<h2 id="raz">Стихи</h2>

посмотреть пример

Подсвечивание разделов, к которым был сделан переход на CSS

При переходе к четверостишию "Зайка" страница не перематывается к началу стиха (см. тут). Чтобы более явно обозначить секцию, можно использовать псевдокласс :target.

<style>
section.blur:target {
  border-color: #f1f1f1;
  animation: anim .5s;
}
section {
  max-width: 20em;
  border: solid rgba(0,0,0,0);
  padding: 0 1em;
}
@keyframes anim { 
  0%, 100% { background: rgba(0,0,0,0); }
  50% { background: aqua; }
}
</style>

<section>
  <nav>
    <a href="#steer">Бычок</a>
    <a href="#bunny">Зайка</a>
    <a href="#bear">Мишка</a>
  </nav>
</section>

<section id="steer" class="blur">
<h2>Бычок</h2>
<p>Идет бычок, качается,
Вздыхает на ходу:
- Ох, доска кончается,
Сейчас я упаду!
</section>

<section id="bunny" class="blur">
<h2>Зайка</h2>
<p>Зайку бросила хозяйка -
Под дождем остался зайка.
Со скамейки слезть не мог,
Весь до ниточки промок.
</section>

<section id="bear" class="blur">
<h2>Мишка</h2>
<p>Уронили мишку на пол,
Оторвали мишке лапу.
Все равно его не брошу -
Потому что он хороший.
</section>

посмотреть пример

Фиксированное сверху меню и отступ от края окна браузера

Хэш-ссылка отматывает страницу к верхнему краю тега соответствующего id. Отчего получается, что фиксированное сверху меню закрывает часть элемента, в моём случае заголовок. Вот так.

Чтобы страница прокручивалась несколько выше элемента, нужно прописать тегу псевдоэлемент :before

<style>
nav { 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border: 4px solid #456;
}
h2:target:before {
  content: "";
  display: block;
  height: 2em;
  margin-top: -2em;
  visibility: hidden;
}
</style>

<nav>
  <a href="#steer">Бычок</a>
  <a href="#bunny">Зайка</a>
  <a href="#bear">Мишка</a>
</nav>

посмотреть пример

Фиксированное меню, в т.ч. для сайтов с параллакс эффектом, с подсветкой текущего пункта

Когда верхняя часть окна браузера проходит раздел веб-страницы, нужно выделить тот пункт меню, допустим поменять цвет его фона, нажав на который пользователь будет перемещён к началу этого раздела. Лучше посмотрите пример . Для разнообразия на этот раз пункты меню отмечены зелёными точками и прикреплены к правой части страницы.

<style>
section { /* убрать схлопывание margin */ 
  display: inline-block;
  width: 100%;
}
nav { /* зафиксировать панель справа по центру */ 
  position: fixed;
  bottom: 50%;
  right: 1em;
  transform: translate(0, 50%);
}
nav a { /* стиль пунктов меню */ 
  display: block;
  margin-bottom: .5em;
  border: .5em solid green;
  border-radius: 100%;
}
.red { /* стиль активного пункта меню */ 
  border: .5em solid red;
}
</style>

<nav>
  <a href="#navsteer"></a>
  <a href="#navbunny"></a>
  <a href="#navbear"></a>
</nav>

<!-- все id начинаются с "nav" -->
<section id="navsteer">
<h2>Бычок</h2>
<p>Идет бычок, качается,
Вздыхает на ходу:
- Ох, доска кончается,
Сейчас я упаду!
</section>

<section id="navbunny">
<h2>Зайка</h2>
<p>Зайку бросила хозяйка -
Под дождем остался зайка.
Со скамейки слезть не мог,
Весь до ниточки промок.
</section>

<section id="navbear">
<h2>Мишка</h2>
<p>Уронили мишку на пол,
Оторвали мишке лапу.
Все равно его не брошу -
Потому что он хороший.
</section>

<!-- меньшее количество JavaScript не придумаешь -->
<script>
window.addEventListener('scroll', function(e) {
  var nav = document.querySelectorAll('section[id^="nav"]');
  for (var i = 0; i < nav.length; i++) { 
    document.querySelector('a[href="#' + nav[i].id + '"]').className=((1 >= nav[i].getBoundingClientRect().top && nav[i].getBoundingClientRect().top >= 1-nav[i].offsetHeight) ? 'red' : '');
  }
}, false);
</script>

посмотреть пример

Меню с плавной прокруткой страницы

Чтобы сделать плавную прокрутку к секции, нажав на ссылку, нужно к скрипту выше добавить:

var linkNav = document.querySelectorAll('[href^="#nav"]'),
    V = 2;  // скорость, может иметь дробное значение через точку
for (var i = 0; i < linkNav.length; i++) {
  linkNav[i].onclick = function(){
    var w = window.pageYOffset,
        hash = this.href.replace(/[^#]*(.*)/, '$1');
        t = document.querySelector(hash).getBoundingClientRect().top,
        start = null;
    requestAnimationFrame(step);
    function step(time) {
      if (start === null) start = time;
      var progress = time - start,
          r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t));
      window.scrollTo(0,r);
      if (r != w + t) {requestAnimationFrame(step)} else {location.hash = hash}
    }
    return false;
  }
}

посмотреть пример

Для пользователей Blogger

Если использовать вкладку "Создать" при редактировании Сообщения, Blogger относительные ссылки вида

<a href="#steer">Бычок</a>

заменяет на абсолютные

<a href="https://www.blogger.com/blogger.g?blogID=0000000000000000000#steer">Бычок</a>

Чтобы избежать проблем, следует использовать абсолютные ссылки вида (текущая страница + хэш)

<a href="http://css.shpargalkablog.ru/2014/03/blog-post.html#steer">Бычок</a>