ブログやドキュメントなどで長文を書く時に見出しメニューを自動で表示してくれるjQuery.pageMenu

ちょっと変わった便利なjQueryプラグインを試してみました。ブログや何かのドキュメント等で活躍するかもしれません。Webサイトのコンテンツで長文の時は見出しメニューが最初にあるととても分かりやすいですよね。そんな時にこのプラグインを使えば自動で見出しメニューを作って表示してくれます。いちいちメニュー作るの面倒だなーと思っている人には便利なプラグインになるかと思います。以下使い方です。

[ads_center]

使い方

使い方はとても簡単です。まずは以下のURLからプラグインをダウンロードします。

jQuery.pageMenu « Info for Coders

いつものようにhead内にjQuery本体とプラグインを読み込んでいきます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="jquery.pageMenu.js"></script>

メニュータイトルを好きなタイトルで指定してあげます。

<script type="text/javascript">
$(document).ready(function() {
    $('h1').pageMenu({title: 'メニュー'});
});
</script>

HTMLはとりあえずこんな感じで。各hタグがメニューになるのでその辺を少し意識しながら記述していきます。

<div id="content">
    <h1>タイトル</h1>
    <h2>1. タイトル1</h2>
    <h3>1-1. タイトル1-1</h3>
    <p>...</p>
    <h3>1-2. タイトル1-2</h3>
    <p>...</p>
    <h3>1-3. タイトル1-3</h3>
    <p>...</p>
        ・
        ・
        ・
</div>

これだけで自動でメニューが作られていきます。とてもシンプルでいいですね。もちろんメニューにリンクもつきますので、クリックでその見出しの場所まで移動もします。あとはメニューの見栄えなんかはCSSで整えてあげるといいかと思います。

自動で作られるメニューのマークアップは以下のように生成されます。

<div class="submenu-container">
    <a class="submenu-open" href="#">...</a>
    <ul class="submenu-list">
        <li><a rel="sm-1" href="#sm-1">...</a></li>
            ・
            ・
            ・
    </ul>
</div>

submenu-○○というクラスをCSSで指定すれば簡単に調整できます。

見出しメニューを作りたい時なんかに1つの手段として覚えておいて損はないですね。