ページ内ナビゲーション Progress Nav

このエントリーを Google ブックマーク に追加
LINEで送る
Pocket

この記事を読んでデモを見てみたら良さげなので西暦和暦変換のサイトに使ってみた。

コンテンツナビゲーションと進捗を合わせた新しいナビゲーションアイデア「Progress Nav」
http://phpspot.org/blog/archives/2017/01/progress_nav.html

Progress Navのデモ
http://lab.hakim.se/progress-nav/

西暦和暦変換
https://reki.gozaaru.com/

画面内にあるすべての要素をナビの中でアクティブ(ハイライト)にしてくれる。

スクロールに合わせてナビがアニメーションするので位置を把握しやすい。そもそもこれがナビゲーションだということがすぐにわかる。

マーカーがラインになっているので、ナビからインデントをなくしても入れ子になっている部分が表現できるのも凄く良い。

progress-nav
https://github.com/hakimel/css/tree/master/progress-nav