In-Page-Navigation

Über das Pattern

Die Navigation direkt im Content-Bereich einer Seite unterstützt eine rasche Orientierung bei umfassenden Inhalten.

Es werden alle h2 innerhalb .wm-site-content ausgelesen und verlinkt.
Die Liste wird automatisch via JS befüllt.

Desktop: Die In-Page-Navigation erscheint rechts vom Text, sobald die Seite gescrollt wurde.

Mobile Variante 1: Als Dropdown an den Header angeheftet. Zeigt beim Scrollen immer die aktuelle Überschrift an.

<div data-wm-inpage-nav="toggle">
	<h2 id="id1">Überschrift 1</h2>
	<p>…</p>
	<h2 id="id2">Überschrift 2</h2>
	<p>…</p>
	<h2 id="id3">Überschrift 3</h2>
	<p>…</p>
</div>

Mobile Variante 2: Als Scrollbalken unter dem Header angeheftet. Zeigt beim Scrollen immer die aktuelle Überschrift an.

<div data-wm-inpage-nav="scroll">
	<h2 id="id1">Überschrift 1</h2>
	<p>…</p>
	<h2 id="id2">Überschrift 2</h2>
	<p>…</p>
	<h2 id="id3">Überschrift 3</h2>
	<p>…</p>
</div>

import { initInPageNav } from './nav-inpage.js';
initInPageNav()