ページ内の特定の要素を目次として生成出来るjQueryプラグイン・MagicNav.js

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。

良さ気なプラグインだったので
備忘録。ページ内の特定の要素
を指定すると、その要素を目次
として生成出来る、というjQuery
のプラグインです。長文のブロ
グを書く方は楽できるのでは。

ページ内の要素・・多分指定する要素はh2とかh3になると思いますが、これらを目次として生成出来る、というもの。

動作サンプルです。指定箇所にナビゲーションが生成されています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="magicnav.js"></script>

jQueryとプラグインを読み込みます。

var magicNav = $.MagicNav(
  $('.foo'),
  $('.bar'),
   {titles:'hoge'}
);

見出しを作る要素と見出しにする要素を指定してオプション設定します。オプションはスクロール時のeasingやスクロール後のオフセット等を設定できます。

 <nav class="foo"></nav>

ここに見出しが生成されます。

どこかで使いたいです。クライアントワークでは使う場面は少ないかもですけど・・ブログ用という印象ですね。ライセンスはGPLとMITのデュアルライセンスです。

MagicNav.js