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

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

Posted at February 23,2011 2:55 AM
Tag:[jQuery, Listfolder, Plugin]

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

1.機能

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

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

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

jQuery listfolder plugin
listfolderプラグイン

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

2.プラグインのダウンロード・インストール

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

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

PayPal - オンラインで安全・簡単にお支払い

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

<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属性など、何でも構いません。

3.(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>

4.オプション

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

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

設定例

jQuery(function() {
    jQuery('#box').listfolder({
        sidebarClass: 'hoge',
        time: 1000,
        initOpen: ['bbb','ddd','fff'],
    });
});
likebox
関連記事
zenback
人気エントリー
トラックバックURL


コメント

お世話になっております。
公開テンプレートMT5ブログ用にて、このエントリーの折りたたみを実行する方法をご教授頂けないでしょうか?

[1] Posted by umazou : June 13, 2011 12:25 AM

お世話になっております。
質問コメントをさせて頂いてて失礼ですが、「サイドメニューの折りたたみ(定義リスト編)」を参考にしてサイドメニューの折りたたみが成功しました。
Listfolderプラグインによる折りたたみは今後の課題として勉強していこうと思います。
まずは成功した旨のご報告をさせて頂きました。不要でしたら上記コメントを含め、削除して頂いて構いません。
今後も参考にさせて頂きます。

[2] Posted by umazou : June 14, 2011 10:06 PM

>umazouさん
こんばんは。
ご返事遅くなってすいません。
すでに他の方法でカスタマイズされたようですが、カスタマイズ方法については別途エントリーしたいと思います。
ではでは!

[3] Posted by yujiro logo : June 15, 2011 2:14 AM

サイドメニューの折りたたみについてメールで問い合わせた者です。新しい方法を教えていただきありがとうございます。

が、教えていただいた方法でのデザインは、ちょっとかっこよすぎるので、やはり問い合わせた方法でやってみたいと思います。

教えていただいた方法については、別の機会に使用させていただこうと思っています。

同じページに2つのメニューを作る場合、スクリプトのどの部分を変更すればよいのでしょうか?

[4] Posted by 増田 : January 4, 2012 8:58 AM

ご質問の件ですが、同じページに2つのメニューを作る場合、

  • メニュータイトルのid属性値
  • メニュー本体を括る要素のid属性値
  • スクリプトの「FoldNavigation」の第1パラメータの部分

を異なるものを設定してください。具体的には次のようになります。

<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>

それではよろしくお願い致します。

[5] Posted by yujiro logo : January 5, 2012 10:51 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)