popover目次のデモ

標準の popover を使うと、目次は記事の上に静かに重なるUIとして扱えます。

静かな動き

目次は記事の上に重なって表示されます。記事自体は動かないため、構造は素直で、標準の開閉挙動をそのまま使えます。

popover は外側のタップや Escape キーで閉じる動作をブラウザが担います。レイヤー管理も単純で、実装の見通しはよくなります。

一方で、目次が記事の下に潜んでいる感覚は弱くなります。操作は自然ですが、今のスライド表現よりも一般的なメニューに近い印象になります。