Содержание статьи - Меню код: HTML5, CSS

Меню содержания страницы как правило это навигационный список, который состоит из якорных ссылок и ведёт на заголовки статьи h2, h3, h4, h5 или h6 используется при большой статье и облегчает навигацию по странице. Не путайте с меню по сайту которое присутствует на всех страницах сайта.

Пример меню:

Содержание статьи [Закрыть]

• 1 Заголовок h2
• 2 Заголовок h2
  • 2.1 Подзаголовок h3
  • 2.2 Подзаголовок h3
  • 2.3 Подзаголовок h3
  • 2.4 Подзаголовок h3
• 3 Заголовок h2
  • 3.1 Подзаголовок h3
  • 3.2 Подзаголовок h3
  • 3.3 Подзаголовок h3
  • 3.4 Подзаголовок h3
• 4 Заголовок h2
• 5 Заголовок h2

Приведённый код HTML вставляем в желаемое место тела статьи, где хотим вывести меню статьи, редактируя код под нужное количество пунктов меню.

Код HTML5:

<details class="contents-menu">
	<summary>Содержание статьи <small>[Закрыть]</small></summary>
	<ul>
		<li><a href="#menu-1"><span>1</span> Заголовок h2</a></li>
		<li><a href="#menu-2"><span>2</span> Заголовок h2</a>
			<ul style="list-style-type: circle;">
				<li><a href="#menu-2-1"><span>2.1</span> Подзаголовок h3</a></li>
				<li><a href="#menu-2-2"><span>2.2</span> Подзаголовок h3</</a></li>
				<li><a href="#menu-2-3"><span>2.3</span> Подзаголовок h3</</a></li>
				<li><a href="#menu-2-4"><span>2.4</span> Подзаголовок h3</</a></li>
			</ul>
		</li>
		<li><a href="#menu-3"><span>3</span> Заголовок h2</a>
			<ul style="list-style-type: circle;">
				<li><a href="#menu-3-1"><span>3.1</span> Подзаголовок h3</</a></li>
				<li><a href="#menu-3-2"><span>3.2</span> Подзаголовок h3</</a></li>
				<li><a href="#menu-3-3"><span>3.3</span> Подзаголовок h3</</a></li>
				<li><a href="#menu-3-4"><span>3.4</span> Подзаголовок h3</</a></li>
			</ul>
		</li>
		<li><a href="#menu-4"><span>4</span> Заголовок h2</a></li>
		<li><a href="#menu-5"><span>5</span> Заголовок h2</a></li>
	</ul>
</details>

Приведённый код CSS вставляем в файл стилей сайта .css. Редактируя код CSS, можно поменять на под свои стили сайта.

Код CSS:

/* --- Содержания статьи, меню --- */
.contents-menu{
	background: #F8F9FA;
	border: 1px solid #A2A9B1;
	padding: 15px 20px 10px 20px;
	display: table;
	border-radius: 2px;
	margin-top: 15px;
}
details:not([open]) summary small {
	display: none;
}
  details[open] summary small {
	color: gray;
}
details summary {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	transition: color .3s;  /* плавная смена цвета */
	cursor: pointer;  /* изменение курсора при наведении */
}
  details summary:hover,
  details[open] summary {
	color: #3394e6;
}

Если плавающее меню сайта. Опускаем фокуса якоря. Можно применить простой скрипт .js код который надо подключить где будет выводится меню статьи.

Код js:

//Отступ от верхнего меню при клике по якорю в содержании статьи
$(document).on('click', 'a[href*=menu-]', function(e){
	e.preventDefault();
	var id = $(this).attr('href');
	var top = $(id).offset().top - 65;
	$('html,body').animate({scrollTop:top + 'px'});
})

Высота отступа будет 65px.

Пример фокуса:

1 Заголовок h2

2 Заголовок h2

 2.1 Подзаголовок h3

 2.2 Подзаголовок h3

 2.3 Подзаголовок h3

 2.4 Подзаголовок h3

3 Заголовок h2

 3.1 Подзаголовок h3

 3.2 Подзаголовок h3

 3.3 Подзаголовок h3

 3.4 Подзаголовок h3

4 Заголовок h2

5 Заголовок h2

Используем спойлер тег "details" и текст метки тег "summary"

Код скрипт .js подключаем в подключённый файл скриптов сайта при необходимости если присутствует плавающее меню в шапке сайта и оно закрывает при фокусировки сам заголовок статьи.

Пример работы меню - Содержание статьи:  1С Битрикс загрузка и выгрузка данных в формате Excel

---

 Источник: KDV.su    Климов Дмитрий