• かちびと.net

    ページ内の特定の要素を目次として生成出来るjQueryプラグイン・MagicNav.jsのご紹介。自動でページ内のナビゲーションを生成します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

MagicNav.js


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

コード

<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

URL :
TRB :

Ads

Posts

Contact

Services