小粋空間  -  a cheap joke and a play on words site

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン

jQueryでサイドメニューの折りたたみを実現するListfolderプラグインを紹介します。同じようなプラグインはすでに存在すると思いますが、勉強がてら作ってみました。

１．機能

このプラグインを利用すれば、サイドメニュータイトルをクリックすることで、リストの折りたたみが簡単にできるようになります。

折りたたみ機能だけであればjQueryを数行書けば実現できますが、このプラグインのウリは折りたたみ状態をクッキーに保持することです。クッキーに保持するので、リロードや他のページに移動しても折りたたみ状態が初期状態に戻ることはありません。

動作は以下の配布ページで確認できます。配布ページのサイドメニュータイトルをクリックすれば折りたたみを行えます。

jQuery listfolder plugin

以下、インストールと利用方法を説明します。

２．プラグインのダウンロード・インストール

Listfolderのページにある「jquery.listfolder_0.0.1.js（バージョンは2011年2月現在）」のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.listfolder.jsとします。

プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

折りたたみを行いたいページに以下の内容を設定します。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.listfolder.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder();
});
</script>

#boxの部分は、折りたたみを行いたいリストを包含している要素やid属性など、何でも構いません。

３．(X)HTMLマークアップ

Listfolderプラグインは、次のような(X)HTMLマークアップを想定しています。 サンプルはdt/dd要素を用いていますが、div要素やul/li要素でも構いません。メニュータイトルのclass属性・id属性は必須です。また、メニュータイトルのclass属性は統一してください。

<dt class="sidetitle" id="hoge">Recent Entries</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

４．オプション

listfolderプラグインは、次のオプションを用意しています。

• sidebarClass:メニュータイトルのclass属性値
• time:折りたたみスピード。デフォルトは0
• initOpen:初期状態を開いた状態にしたいリストのid属性値を配列で指定。デフォルトなし

設定例

jQuery(function() {
    jQuery('#box').listfolder({
        sidebarClass: 'hoge',
        time: 1000,
        initOpen: ['bbb','ddd','fff'],
    });
});

• hatena
• twitter
• google
• facebook

<h3 class="sidetitle" id="categoryname">カテゴリリスト</h3>
<div class="side" id="categorylist">
（メニュー本体）
</div>
 
<h3 class="sidetitle" id="monthlyyname">月別アーカイブ</h3>
<div class="side" id="monthlylist">
（メニュー本体）
</div>
 
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
FoldNavigation('monthly','on',true);
//-->
</script>